ブログなどでソースコードを美しく見せるためのライブラリが多数ありますが、今回から「SyntaxHighlighter」を使用することにしました。
やはりソースコードは色分けされていたほうが見やすいですしね。
いろんなライブラリがあるのですが、その中でも「SyntaxHighlighter」の表示の仕方が一番好みだったのと、一番使われているような気がしましたので採用しました。
導入方法は簡単。
SyntaxHighlighterのダウンロードページからダウンロード。いろんな言語のバージョンがあります。（ここでいう言語とはプログラム言語ではなく、英語や日本語といった自然言語のこと）
私が確認した時点（2010年2月13日）では、日本語バージョンは無かったので「English」をダウンロード。
ダウンロードしたファイルを解凍して、サーバーにアップ。
ブログの記事に記述するソースコードの言語（ここでいう言語とはJavaScriptやPHPといったプログラム言語）によって、読み込む JavaScriptが変わります。
ツールバーの表示／非表示や、行番号の表示／非表示など、いろいろコンフィグでいじることができます。
MovableType用の「SyntaxHighlighter for Movable Type」というプラグインもあります。
せっかく導入したckeditorなどのリッチテキストエディタが利用できなくなるという点、コンフィグが使用できないという点もありますが、私の場合は特に問題を感じなかったので、今回はこちらを使用しました。
プラグインをダウンロードして、mtディレクトリにアップロード
「HTMLヘッダー」テンプレートに下記のようなソースを追加します。
brush属性は、記述したいソースコードの言語によって変更します。
theme属性は、見た目の変更。
<$mt:SyntaxHighlighterInclude brush="as3,css,jscript,perl,java,php,python,ruby,sql,xml" theme="default" $>
ブログ記事の編集で、フォーマット"SyntaxHighlighter"か"SyntaxHighlighter + Convert Line Breaks"を選択
あとは<pre>タグと、ソースコードの言語によってclass名を変更するだけでOK。
プラグイン版なら、[code:～で記述できます。（上記の参考サイトを参照）
以下はCSSのソースコードを表示する場合。
<pre class="brush:css;">
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
</pre>
過去に記述したソースコードを全部修正しようかと思いましたが、面倒なのでやめました。
今後記載するソースコードで使用して行こうと思います。
コメントする