Movable Type 4.21にSyntaxHighlighter 1.5.1を設置

htmlやcssなどのコードを色付きで表示してくれる、Google謹製のJavaScript、syntaxhighlighterを当ブログに設置しました。

参照

• syntaxhighlighter - Google Code

設置方法

ファイルのダウンロード

syntaxhighlighter Downloadsから下記ファイルをダウンロード

• SyntaxHighlighter_1.5.1.rar

ディレクトリ構成を決定

thickbox設置時の構成に習い、下記構成に決定。

Movable Type インストールディレクトリ/
    +-- js/
    |    +-- syntaxHighlighter/
    |    |    +-- shBrushCpp.js
    |    |    +-- shBrushCSharp.js
    |    |    +-- shBrushCss.js
    |    |    +-- shBrushDelphi.js
    |    |    +-- shBrushJava.js
    |    |    +-- shBrushJScript.js
    |    |    +-- shBrushPhp.js
    |    |    +-- shBrushPython.js
    |    |    +-- shBrushRuby.js
    |    |    +-- shBrushSql.js
    |    |    +-- shBrushVb.js
    |    |    +-- shBrushXml.js
    |    |    +-- shCore.js
    |    |    +-- css/
    |    |    |    +-- SyntaxHighlighter.css
    |    |    +-- flash/
    |    |    |    +-- clipboard.swf

ファイルのアップロード

ディレクトリ構成に従い、各ファイルをアップロード

テンプレートの編集

Movable Typeの管理画面より[ヘッダー・テンプレート]のhtml要素内に下記項目(SyntaxHighlighterを利用して表示しています。以下同様。)を追加して保存。

Movable Typeの管理画面より[フッター・テンプレート]のbody要素の終了タグ直前に下記項目を追加して保存。

投稿記事での使い方

pre要素若しくはtextarea要素に必要なコードを貼り付けます。コードを囲んだ何れかの要素のname属性の値に"code"を指定し、class属性に貼り付けたコードに該当する値(参照:Supported languages)を指定します。

textarea要素を使用した場合

textarea要素ではcols属性とrows属性は必須属性な為、必ず指定することになりますが、実際の表示領域はSyntaxHighlighterが調整しているので、この値を調整しても反映されないようです。

pre要素を使用した場合

<pre name="code" class="xhtml">
... some code here ...
</pre>

pre要素内のテキストで[<][>]を使用する場合、それぞれ代替の[&lt;][&gt;]に置換しておく必要があります。

参考

THE HAM MEDIAのValidに対応させたコードを綺麗に見せる『SyntaxHighlighter』導入記事に『preタグではname要素(属性: Fuku-chang註)を使うことが本来できない』とあります。実際、The W3C Markup Validation Serviceでチェックをすると「there is no attribute "name".」と叱られます。

サイト管理人のハム氏はスクリプトの修正で対処されていますが、私はtextarea要素を使うことにしました(^^ゞ