ソースコードに色を付ける

[2009-05-23-1] のように、時々ソースコードを貼り付けることがあります
が、色が付かなくて寂しかったので google-code-prettify で色を付ける
ようにしてみました。chalow 以外のブログにも使えると思います。

[src]〜[/src] で囲まれたソースの言語を自動判別して、適切
に色付けしてくれます。

http://code.google.com/p/google-code-prettify/ から、
“prettify-small-日付.zip” をダウンロードします。(“prettify-日付.zip”
は *.js が圧縮されていません。こだわりがなければ small の方をダウン
ロードすればよいでしょう。)
解凍してできる *.css と *.js をご自分の Web スペースにアップしま
す。今回は http://masutaka.net/prettify/ にアップしました。以下、こ
の状態を前提に話を進めます。
お使いの CSS に、以下を追加します。
@import url(http://masutaka.net/prettify/prettify.css);
cl.conf を修正します。全てのの直前に、以下を挿入すれば
よいでしょう。

<script type="text/javascript" src="http://masutaka.net/prettify/prettify.js"></script>
<script>prettyPrint();</script>

※ 私は $side_menu を全てのページで表示するようにしているので、その
先頭に 1 つだけ追加しました。

chalow を修正します。以下はオリジナル(chalow-1.0.tar.gz)の
chalow へのパッチです。

--- orig/chalow-1.0/chalow	2007-10-19 23:15:01.000000000 +0900
+++ chalow-1.0/chalow	2009-05-23 23:35:24.000000000 +0900
@@ -1313,7 +1313,7 @@
     $$strp =~ s|\x7\x13(\d+)\x3|eval($escaped_plugin{$1})|ge;
     ### ソースアンエスケープ - pre 追加
     #$$strp =~ s|\x6\x13(\d+)\x3|<pre>$escaped_src{$1}</pre>|g;
-    $$strp =~ s|\x6\x13(\d+)\x3|</p><pre>$escaped_src{$1}</pre><p>|g;
+    $$strp =~ s|\x6\x13(\d+)\x3|</p><pre class="prettyprint">$escaped_src{$1}</pre><p>|g;
     ### HTML アンエスケープ
     $$strp =~ s|\x5\x13(\d+)\x3|$escaped_string{$1}|g;
 }

chalow を実行してサイトを構築し直せば、ソースコードに色が付いて
いると思います。

リリース元の解説はもちろん参考になりましたが、それ以上に
「404 Blog Not Found:javascript+CSS - google-code-prettifyの導入」
が大変参考になりました。ありがとうございます。

ただ、Lisp 系のソースの色付けがうまくいきません。長くなるので、次の
記事 [2009-05-24-2] で説明します。

google-code-prettify の他に、Text::VimColor を使う方法もあるようで
す。ただ、さくらインタネットには vim がインストールされていなかった
ので、今回は試しませんでした。