SyntaxHighlighterを導入

2009年7月16日 02:36 | Comments | 0 Trackbacks |

ブログ記事中に記述したソースコードを綺麗に、見やすく表示することができる『SyntaxHighlighter 2.0』を導入しました。

以前違うブログへ『SyntaxHighlighter 1.5.1』を導入した際は、色々と手間取ったのですが、『SyntaxHighlighter 2.0』は特に問題もなく導入することが出来ました。

『MTOS 4.26』への『SyntaxHighlighter 2.0』の導入手順を記事にしておきます。

準備編

『SyntaxHighlighter 2.0』をダウンロード
SyntaxHighlighter
ダウンロードし、解凍したフォルダ名を任意名（syntaxhighlighterなど）にし、FTPソフトでアップロードする。
このブログでのアップロード先は/blog/common/js/syntaxhighlighter/。

表示させたいHTMLファイルのHEAD部に

<script type="text/javascript" src="js/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="js/syntaxhighlighter/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="js/syntaxhighlighter/styles/shThemeDefault.css" />
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'js/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

を記述する。
※上記は『SyntaxHighlighter 2.0』で設定されているすべての言語で利用するための記述です。

利用編

『SyntaxHighlighter 2.0』を利用して表示したいソースコードを
```
<pre class="brush:html;">
ここに記述
</pre>
```
実体参照で記述する（brush:で利用したい言語を指定。brushについてはこちら）。
SyntaxHighlighterサンプルのように表示されればOK。

ソースコードが綺麗に表示されているとサイトが格好良く見える気がします。