google-code-prettify でソースコードを色分け表示
先日の記事に掲載した「コードなにがしガジェット」はお試しいただけたでしょうか。このガジェットではソースコードを色分けするために google-code-prettify というライブラリを使っているのですが、これがとても便利だったので、本日はその使い方などをご紹介しようと思います。
google-code-prettify とは
google-code-prettify はさまざまな言語のソースコードを色分け表示するための JavaScript ライブラリです。 CGI などが必要なく、 HTML に簡単な JavaScript コードを埋め込むだけで色分けを実現できるので、さまざまな場面で利用できます。その他、以下のような特長があります。
- C/C++, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefile, Ruby, PHP, Awk, Perl などといった多数の言語に対応。
- 自動的に言語を識別して適切な色分けを行う。
- いわゆる unobtrusive なライブラリになっており、本来の HTML コードにほとんど手を加える必要がない。
- IE（後述の不具合あり）, Firefox, Safari に正式対応。 Opera でもだいたい動くようです。
具体的な色分けの様子はこちらのページで確認できます。 JavaScript の正規表現リテラルなども正しく処理されていて、色分け精度はなかなかのものです。
基本的な使い方
まずこちらのページからアーカイブをダウンロードします。圧縮バージョンの "prettify_small_日付.zip" と未加工の "prettify_日付.zip" がありますが、通常は圧縮バージョンを使うのが良いでしょう。
ダウンロードした zip ファイルを展開すると "prettify.js" と "prettify.css" の 2 つのファイルが作成されます。これらを Web サーバーにアップロードし、色分けしたいソースコードを含む HTML ファイルの HEAD 要素内でに以下のようにして読み込みます。
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>
次に、色分けしたいソースコードを含む PRE タグに "prettyprint" クラスを適用します。色分けする PRE タグは複数あってもかまいません。
<pre class="prettyprint"> <!-- ソースコード --> </pre>
最後に、ページロード時に prettyPrint() という JavaScript 関数を実行します。以下のように BODY タグの onload 属性に書いてしまうのが手軽でしょう。
<body onload="prettyPrint();">
以下は C 言語のいわゆる Hello World プログラムを色分け表示する HTML の例です。前述のコードなにがしガジェットを使っているので、 IE 以外のブラウザでは、このソース自体も google-code-prettify で色分け表示されています。
このように、普通の HTML にわずかなタグを追加するだけで、ソースコードの色分け表示が実現できます。
色分けした HTML コードの取得
既存の PRE タグの内容を置き換える方法は手軽に使えるのですが、場合によっては都合が悪いこともあります。例えば Ajax で読み込んだソースファイルの内容を色分けして表示するような使い方には不向きですよね。そこで色分けした HTML コードを取得する方法を調べてみました。ただし、内部関数を直接呼び出すので今後のバージョンアップで使えなくなる可能性もあります。ご了承ください。
まずは先ほどと同様に "prettify.js" と "prettify.css" を読み込みます。ただし prettify.js は非圧縮バージョン（"prettify_日付.zip" に入っているもの）をお使いください。圧縮バージョンは必要な関数の名前が置き換えられているため使えません。
ソースコードを色分けするには、 prettyPrintOne 関数を利用します。変数 "src" に色分けしたいソースコードが格納されているとして、以下の JavaScript で色分け後の HTML が取得できます。
var colorized = prettyPrintOne(PR_textToHtml(src))
あとは、 colorized の内容を適当な手段でドキュメントに挿入すれば、色分けされたコードが表示できます。例えば、以下は先ほどと同様に C 言語の Hello World のソースを表示する HTML ページのソースです。
上記では document.write で HTML を挿入していますが、もちろん DOM API と innerHTML を使うことも可能です。このインターフェースはぜひとも正式に公開してほしいものですね。
IE での動作
記事でも触れたとおり、コードなにがしガジェットではブラウザが IE の場合は色分け表示を抑制しています。これは、 IE のときのみソースコード中の空行が削除されてしまうという不具合が出たためです。最初は iGoogle ガジェットが QuirksMode で動いているからかと思ったのですが、 StandardMode でも IE7 でも同様でした。よくよく見てみると、公式ページのサンプルでも同じ現象が見られます。
少し調査してみたのですが、 IE では PRE タグの内容を動的に書き換えるといろいろと妙な現象が起こるようですね。例えば、 PRE タグ内の TextNode を置き換えると、空行のみならずすべての改行が削除されたりします（´Д｀；
そんなわけで、今のところ上記の現象を回避する方法が見つからず、 IE のときは google-code-prettify を無効にするという手段をとったわけです。なにか良い方法をご存知でしたら、どうかご教授くださいませ。
以上、本日は google-code-prettify を使って JavaScript のみでソースコードを色分け表示する方法をご紹介しました。 blog などにソースコードを掲載するときはもちろん、 Web アプリケーションでも便利そうですね。皆さんもぜひ使ってみてください！
詳しくはこちらの記事をどうぞ！
この記事にコメントする