Movable Type

ソースコードをカラフルに読みやすくする - dp.SyntaxHighlighter

2008-01-31
3分で読了
更新: 2025-12-14

目次

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

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

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

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

20080131syntaxhighlighter01.jpg

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

20080131syntaxhighlighter02.jpg

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

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

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

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

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

この記事をシェア

関連記事