google-code-prettifyとは?

統合開発環境や高機能エディタでは、編集するソースコードやテキストファイルの種類に応じてテキストがハイライト表示されることが多い。ハイライト表示はきれいで見やすくなるし、コーディング上の問題を発見しやすくなるという実用上の利点もある。

となるとWebで掲載するソースコードも、ぜひともハイライト表示させたいところだ。Web掲載するソースコードやテキストのハイライト表示化の方法はいくつもあるが、ここではGoogleで公開されている「google-code-prettify」を紹介したい。

google-code-prettifyはApache License Version 2.0のもとで公開されているシンタックスハイライトモジュール。JavaScriptモジュールとCSSファイルの2つから構成されたシンプルな成果物で、HTML文書内に直接記述されたソースコードをシンタックスハイライト化する機能を提供する。なんといっても導入が簡単なところがポイントが高い。

google-code-prettifyの使い方

google-code-prettifyの導入は非常に簡単だ。とりあえずgoogle-code-prettifyのサイトから成果物をダウンロードしておく。JavaScriptファイルとCSSファイルがそれぞれ1つづつだ。

まず、シンタックスハイライトしたいHTML文書のヘッダにリスト1を追加する。script要素とlink要素で指定するファイルはそれぞれパスが通ったところに書き換えるように。

リスト1 ヘッダでgoogle-code-prettifyのJavaScriptファイルとCSSファイルを指定する

次にbody要素にonload="prettyPrint()"属性を追加する。これによってgoogle-code-prettifyを使ったシンタックスハイライト処理が実施させるようになる。

リスト2 body要素でprettyPrint()が動作するように属性を追加

そしてシンタックスハイライトさせたいソースコードを「<pre class="prettyprint"><pre>」要素の中にコピーすればよい。

リスト3

あとはページが読み込まれるときにgoogle-code-prettifyが実行され、表示されるソースコードのシンタックスハイライトが実施されるという寸法だ。ソースコード部分が書き変わるわけではないので、HTMLのソースコードを表示させてpre要素に書き込まれているソースコードをそのままコピーして使うことができる。掲載も簡単、コピーして使うのも簡単だ。