いろいろな人のブログを見ていると、ソースコードがとても見やすく載っているので、どうやってるのかな～と思ってぐぐってみました。行き着いたのがdp.SyntaxHighlighterというJavaScriptライブラリです。

僕もさっそく導入してみました。参考にしたのは「dp.SyntaxHighlighter - Movable Type備忘録」です。結構苦戦しましたが、一応うまくいったので自分がやった方法をエントリーしてみます。正しいやり方か保証できませんが。

まず、Mobeble Type（MT）がインストールされている（index.htmlがある）ディレクトリに「dp.SyntaxHighlighter」というフォルダを作ります。

次に、dp.SyntaxHighlighterへアクセスして、右側のメニューから「SyntaxHighlighter_1.5.1.rar」をダウンロードします。

ダウンロードしたファイルを解凍し、解凍されたフォルダの中の「Scripts」と「Styles」のフォルダを先ほど作った「dp.SyntaxHighlighter」の中に丸ごとアップロードします。このとき、 rarファイルがうまく解凍できなかったら、フリーソフトの「Lhaplus」を使えばうまくいきます。

続いて、MTのテンプレートのヘッダー部分（</head>の直前とか）に以下のソースを挿入します。コメントは入れなくてもいいですが、入れておいた方が後々管理が楽だと思います。ちなみに以下のソースコードの表示がdp.SyntaxHighlighterの使用例です。

<!-- dp.SyntaxHighlighter -->
<link rel="stylesheet" href="<$MTBlogURL$>dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<!-- /dp.SyntaxHighlighter -->

webscript.jsという次のコードを入力したファイルを新規に作成し、dp.SyntaxHighlighterの中へアップロードします。

window.onload = function() {
dp.SyntaxHighlighter.HighlightAll('code', true, false);
}

そして</body>タグの手前に次のコードを入れたらうまく行きました。

<script type="text/javascript" src="<$MTBlogURL$>dp.SyntaxHighlighter/Scripts/webscript.js"></script>

後は<textarea name="code" class="xhtml"></textarea>の間にソースを入れましょう。なお、入力するソースによってclass名を「xhtml,css,js,php」のように変えます。具体的にはSupported languagesに載っています。