ソースコードを良い感じに表示する「google-code-prettify」を試す

WordPressは、SyntaxHighlighterを使っているんですが、サンプル用のページを作ろうかなーと思い、軽く調べてgoogle-code-prettifyってライブラリが良さげだったので、ちょっとお試し。

DLして、ドキュメントルート以下に適当に置いてからheadに追加。

<link href="/google-code-prettify/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="/google-code-prettify/prettify.js"></script>

で、prettyPrint();を呼ぶんですが、

<body onload="prettyPrint()">

って感じで、bodyのonloadに追加するのでもいいでしょうし、jQueryを使ってるなら、

$(function(){
  prettyPrint();
});

こんな感じで呼んでもいいかもしれません。

あとは、コードを表示したい部分をpreタグで囲んで、classにprettyprintを指定すればOK。

<pre class="prettyprint">
ここがコード
ここがコード
ここがコード
</pre>

classにlinenumsを追加すると、行数の表示。

<pre class="prettyprint linenums">
ここがコード
ここがコード
ここがコード
</pre>

linenums:100みたいな感じで、先頭の行番号を指定する事もできるみたいです。

<pre class="prettyprint linenums:100">
ここがコード
ここがコード
ここがコード
</pre>

WordPressで使ってる人もいるみたいなので、気が向いたらブログもこっちに変更しようかな・・。