前々からシンタックスハイライトをしたいと思っていたのですが、検索したところ
google-code-prettifyでソースコードのシンタックスハイライト
http://mahata.net/mt-dev/2007/10/googlecodeprettify.html
という記事を見つけたので試してみることにしました。
http://code.google.com/p/google-code-prettify/
からダウンロードします。
prettify_31_Aug_2007.zip
prettify-small_31_Aug_2007.zip
がありました。
コメントなどが取り除かれファイルサイズが少ない
prettify-small_31_Aug_2007.zip
をDLします。
zipを解凍すると
prettify.js
prettify.css
がでてきます。
とりあえず
DocumentRoot/js/
にjsもcssもおきます。
で、Movable Typeにログインしてテンプレートモジュールのヘッダファイルに
<link href="/js/prettify.css" rel="stylesheet" type="text/css"/> <script src="/js/prettify.js" type="text/javascript"></script>
を追加。
次にbodyタグにて
<body onload="prettyPrint()">
としてprettyPrint()を呼び出したいのですがMT4の上記のヘッダテンプレートではonloadで呼び出すスクリプトをbody_onloadにSetVarしておかないといけないようです。
アーカイブテンプレートのブログ記事を見ると
<MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name)">
となっていたので
<MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name);prettyPrint();">
にします。
アーカイブテンプレートのブログ記事リストではbody_onloadにはSetVarしていなかったので
<MTSetVar name="body_onload" value="prettyPrint();">
を
<$MTInclude module="ヘッダー"$>
よりも上に入れます。
あとは
<pre class="prettyprint">Hello, World.</pre>
でくくればok。