Movable Type 4にgoogle-code-prettifyを入れる

前々からシンタックスハイライトをしたいと思っていたのですが、検索したところ
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。

人見知りソフトウェアエンジニアです。ビジュアル系、お笑い、Pixarが好き。勢いで吉本超合金おたけびBOTを作った。オールザッツ漫才が放送されない東京在住。

趣味や日常からアウトプットの場としてブログを書いています。自作のWordPressプラグインにGitHub Flavored MarkdownAmazonJSなど。