ソースコードの色付け - SyntaxHighlighter - <設定編>

今回は、SyntaxHighlighterの設定編です。

結論から言うと、最も簡単な設定方法は、以下のコードを</head>タグの前に貼り付けるだけです。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Bloggerであれば、ブログメニューの"デザイン"->"HTMLの編集"を選び、テンプレート内の</head>タグの前に、上記のコードを貼り付けます。設定は、これで終わりです。

この設定がされていると、<pre class=""></pre>タグを使用したソースコードの色付けができるようになります。


おまけ

上記の方法では、SyntaxHighlighter作者サイトのドメインalexgorbatchev.com上のスタイルシートやjavascriptコードを参照しています。実は、参照されるたびに、SyntaxHighlighter作者にお金がかかっています。SyntaxHighlighter作者は、Amazon S3を利用しており、毎月40ドルほど請求されているそうです。今のところ無料で利用できますが、今後もそのままかどうかは作者次第です。下の引用にそのことが説明されており、請求の支払いのために寄付を募集していたりもします。

While the hosting is offered as a free service, I’m currently receiving approximately 22m requests a and 83GB in bandwidth every month which is costing me an additional $40 on Amazon S3. Where am I going with this? You guessed it – please donate to help me pay for this :)

(Ref. : http://alexgorbatchev.com/SyntaxHighlighter/hosting.html)

自サーバを持っている人は、 SyntaxHighlighterのスタイルシートとjavascriptコードをダウンロードして、自サーバに置くようにするといいと思います。その方が、SyntaxHighlighter作者サイトへいちいち参照をしないので、サイトレスポンスもよくなります。