メモ：mt.Vicuna simpleにSyntaxHighlighter 3.xの設置

mt.Vicuna simple pluginテーマにSyntaxHighlighterを置いてみました。

コード表記の表示でみやすくするライブラリなのですが、mt.Vicuna simpleに設置をしてみましたので、そのときのメモとして記録しておきます。

mt.Vicuna Simpleはmt.Vicuna Simple - Movable Type Plugins and Themes Directoryから

行程の概要

大雑把な流れは以下のリストのようなものとなっています。

SyntaxHilighterの入手先：
ファイルのアップロード：

自分の場合ですが、サイトのディレクトリ下にlibフォルダを作りその下にSyntaxHighlighterフォルダ、その配下にscripts,stylesフォルダとしてアップロードしています。

  • lib
    • SyntaxHighlighter
      • scripts
      • styles

テンプレートモジュールの作成とテンプレート修正について

以降はmt.Vicunaテンプレート向けの話として記述しています。

管理上の都合でモジュールテンプレートとしてインクルードする形としました。コード内で使っている変数名は任意のものです。

具体的には専用の変数をあらかじめセットしておき、その値によりSyntaxHilighterを使えるようにするかどうかを判断して分岐させます。

ということで作成したSyntaxHighlighterという名のモジュールテンプレートは以下です。

<mt:SetVars>
Shlib=http://localhost/lib/SyntaxHighlighter/
</mt:SetVars>
<link href="<$mtvar name="Shlib"$>styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="<$mtvar name="Shlib"$>styles/shCoreDefault.css" type="text/css" rel="stylesheet" />
<script src="<$mtvar name="Shlib"$>scripts/shCore.js" type="text/javascript"></script>
<script src="<$mtvar name="Shlib"$>scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
setTimeout ( function(){
    SyntaxHighlighter.autoloader(
         "bash                      <$mtvar name="Shlib"$>scripts/shBrushBash.js"
         ,"css                      <$mtvar name="Shlib"$>scripts/shBrushCss.js"
         ,"html xml xhtml           <$mtvar name="Shlib"$>scripts/shBrushXml.js"
         ,"js jscript javascript    <$mtvar name="Shlib"$>scripts/shBrushJScript.js"
         ,"perl pl                  <$mtvar name="Shlib"$>scripts/shBrushPerl.js"
         ,"plain                    <$mtvar name="Shlib"$>scripts/shBrushPlain.js"
         ,"php                      <$mtvar name="Shlib"$>scripts/shBrushPhp.js"
    );SyntaxHighlighter.all();
},0);
</script>

この例ではあらかじめ変数に共通するSyntaxHighlighterのあるフォルダをセットしてmtvar(MTGetVar)で呼び出しをしています。使いたいテンプレートで階層に変化があっても困らないようにhttp://から始まるパスにしています。

Autoloaderについて簡単に触れておくと、使いたい言語のハイライトのためのJSを読み込んでくれるメソッドのようです。詳しくはよく知らなかったりします。

モジュールテンプレートをインクルード

先に示したモジュールのインクルードです。取り込み箇所は、今回はhead要素内にということにしてみました。

以下をHTMLヘッダーモジュールテンプレート内に記述します。場所はmeta要素より下ならば任意の箇所で。自分は<$MTCCLicenseRDF$>の上に記述するとしました。

<MTIf name="Shenabled" eq="1">
<mt:include module="SyntaxHighlighter" />
</MTIf>

以下を必要なアーカイブテンプレートなどの先頭のSetVarsテンプレートタグの中に追加しておきます。

Shenabled=1

MTEntryBody等の出力の修正

pre要素を使ったときに、出力で改行コードが減らされているために整形済のテキストを示せなくなるので（強制改行を使えば表現できますが）以下のようにモディファイアを取り去ります。

<MTIf tag="EntryBody" strip_linefeeds="1" trim="1">

上記の箇所を、以下のように。MTEntryMoreについても同様です。

<MTIf tag="EntryBody">

実際の利用

あとは、記事のなかのコードの箇所にコードを記述します。pre内で表示するのに、&などは文字実体参照に置き換えをします。これは面倒だというときの方法があるのですが、自分はMT記事編集画面で文字実体参照に一発変換するボタンを利用してるのでそのままの状態で使っています。

そしてその対象とする要素にclass="brush: js;"のように言語に応じてclass名を指定しておけば完了です。

ちょっと書き足りてない気はしますが、だいたいこのような形です。