google-code-prettifyを導入しました

今までは、ソースコードを投稿するときは<code>を使っていたのですが、これだけだと背景色やフォントの変更くらいしか表現できていませんでした。

今回、google-code-prettifyを導入することによって、上のようなきれいなsyntax hilightが実現できるようになりました。

導入方法は至って簡単。

まず、http://code.google.com/p/google-code-prettify/から、最新のコードをダウンロードします。

ダウンロードできたら、解凍後ファイルをサーバにアップロードしておきます。

次に、header.php内の<head></head>の間に、以下のJavascriptのタグを入れます。

<script type="text/javascript" src="<?php print get_bloginfo('url') ?>/wp-content/themes/flup/js/prettify.js"></script>

上記jsファイルのURLは環境によって異なりますので注意が必要です。

次に、window.onload または、HTMLの最後の方にprettifyを実行するためのコードを記述します。

私の場合、google analyticsのコードの後に入れてみました。

<script type="text/javascript">
//<![CDATA[
_uacct = "UA-588566-3";
urchinTracker();
prettyPrint();
//]]>
</script>

準備としては、これだけです。

使い方は、記述したコードを <pre class="prettyprint"></pre> で囲むだけです。
ちょうどこのページではprettyPrint()を呼び出す箇所で使っています。

私の場合以下の2点がポイントとなりました。

まず、最初にprettifyのscriptタグを一番上に入れたのですが、その場合prettyPrint()実行後コードがまったく表示されない状態になってしまいました。

その後、最後の位置へ移動させたところ正常にsyntax hilightingできるようになりました。

私の場合、Lightboxを使用しているのでそれが原因なのかもしれませんが、small版を使うとなぜかLightboxの初期化時にエラーが出てしまいます。通常版に入れ替えたところ、問題なく動作するようになりました。

今までの記事についても、google-code-prettifyを適用してみたので、興味があれば見てみてください。

追記。
preの中でも<および>はそのままだと書けないので、<とか>といった書き方をする必要があります。