この「高密度商業地域」のように、HTMLやCSS、JavaScriptのコードをブログに掲載する際、単純に<pre>タグで囲うだけでも良いのですが、ソースコードの可読性を上げたり見た目をカッコよくしたいと思うことが稀によくあると思います。
2013-06-22_002.png


世の中には同じようなことを思う方がたくさんいるわけで、いわゆるテキストエディタのようなかたちでソースコードをハイライトし、可読性を高めてくれるツールが存在します。

その手のツールで最もメジャーなのは SyntaxHighlighter だと思うのですが、導入にあたっていくつもファイルをサーバにアップロードする必要があり、FC2ブログで使うには少し面倒くさいなぁ、という感がありました。


そこで、もう少し何か簡単なソースコードのハイライトツールがないかな、と探してみると、Google が提供している google-code-prettify というツールがあり、こちらの方がシンプルで使い勝手がよかったのでこっちを使うことにしました。

以下はその導入の方法のメモです。
ただし、下記を読む前にまずは公式サイトの「GettingStarted」の参照をお願いします。


１．ファイルのダウンロード

まずは、公式サイト http://code.google.com/p/google-code-prettify/ にある Downloads から ライブラリ一式をダウンロードします。
ソースファイルをがっつり変更するつもりが無いのであれば、「Minimized JS and CSS sources」と書かれたほう（2013年6月22日時点では「prettify-small-4-Mar-2013.tar.bz2」）をダウンロードします。
2013-06-22_001.png


２．ファイルの解凍

Windowsな環境の方が多いと思われるので、一応。
ダウンロードしたファイルはbz2形式で圧縮されています。

馴染みのない形式ですが、馴染みのある圧縮・解凍ソフト「Lhaplus」で解凍できます。

解凍すると、「google-code-prettify」フォルダに以下のファイルが展開されます。
今回のターゲットはHTML、CSS、JavaScriptなので、使用するのは「lang-css.js」「prettify.js」「prettify.css」です。
2013/03/05  05:09               988 lang-apollo.js
2013/03/05  05:10               516 lang-basic.js
2013/03/05  05:10             1,446 lang-clj.js
2013/03/05  05:10               868 lang-css.js
2013/03/05  05:10               947 lang-dart.js
2013/03/05  05:10               583 lang-erlang.js
2013/03/05  05:10               283 lang-go.js
2013/03/05  05:10               579 lang-hs.js
2013/03/05  05:10               774 lang-lisp.js
2013/03/05  05:10               358 lang-llvm.js
2013/03/05  05:10               553 lang-lua.js
2013/03/05  05:11            19,700 lang-matlab.js
2013/03/05  05:11             1,106 lang-ml.js
2013/03/05  05:11               887 lang-mumps.js
2013/03/05  05:11             1,402 lang-n.js
2013/03/05  05:11               713 lang-pascal.js
2013/03/05  05:11               302 lang-proto.js
2013/03/05  05:11               696 lang-r.js
2013/03/05  05:11               268 lang-rd.js
2013/03/05  05:11               916 lang-scala.js
2013/03/05  05:11             1,802 lang-sql.js
2013/03/05  05:11               635 lang-tcl.js
2013/03/05  05:12               286 lang-tex.js
2013/03/05  05:12             1,791 lang-vb.js
2013/03/05  05:12             1,450 lang-vhdl.js
2013/03/05  05:12               544 lang-wiki.js
2013/03/05  05:12            23,242 lang-xq.js
2013/03/05  05:12               412 lang-yaml.js
2013/03/05  05:09               675 prettify.css
2013/03/05  05:09            14,551 prettify.js
2013/03/05  05:09            16,682 run_prettify.js



３．ファイルのマージ

「lang-css.js」「prettify.js」をそのままアップロードしてもよいのですが、わざわざ２つのファイルに分けて読み込ませるのはファイルの読み込みオーバーヘッドの無駄（微々たるものですが）なので、その２つをマージします。

手順は全く単純で、「prettify.js」ファイルを開き、１行追加してそこに「lang-css.js」の内容をコピペするだけです。

ちなみに、「lang-css.js」を使わないと、CSSの予約語（margin、paddingなど）はプレーンテキストとして扱われます。


４．ハイライト用CSSのカスタマイズ

見栄えをさらにかっこ良くしたいのであれば、標準の「prettify.css」ではなく、見栄えを改善したスタイルシートを使用します。

幸いなことに、「Color themes for Google Code Prettify」というページでテーマが幾つか配布されているので、それをありがたく利用させていただききます。
公式の方でも「Gallery of themes for code prettify」でテーマが配布されています。

使い方は前者のページにも書かれている通り、prettify.css ファイルを入れ替えるだけとシンプルです。

1.Setup the Google Code Prettify.
2.Replace prettify.css with a downloaded CSS file.
3.Beautiful.



さらに見た目にこだわりたい場合は、ダウンロードしたテーマCSSをさらにカスタマイズすると良いでしょう。
また、見た目の表示が崩れないように PRE に overflow: auto を持たせておくとよいと思います。

余談ですが、行番号を表示させるオプション（linenums）を使うと、行番号が表示されるのは標準で５行ごとです。
これを１行ごとに番号を振るようにする場合、li.L0, li.L1, ... , li.L9となっている部分の「list-style-type: none」を削除するか、以下のようにします。
ol.linenums li {
    list-style: decimal outside;
}



５．ウェブサイトへの組み込み

これは特に難しいこともなく、head 要素内に「prettify.js」と「prettify.css」のパスを追加します。

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


そして、ページが load されたときに prettyPrint(); を実行するようにすれば、前準備は完了です。
よくある方法の <body onload="prettyPrint()"> ではなく、当ブログの「イベントハンドラからイベントリスナへ」で述べているように、イベントリスナへ登録する方法とします。
<script type="text/javascript">
// <![CDATA[
(function(){
	function init(event){
		prettyPrint();
	}
	if(window.addEventListener)window.addEventListener("load",init,false);
	else if(window.attachEvent)window.attachEvent("onload",init);
})();
// ]]>
</script>


上記のコードをページのどこかに書いてやればOKです。

しかし、いちいち google-code-prettify を実行するページに書くのが面倒くさい、ということであれば、前述の「prettify.js」の最後に上記コードの (function(){ ～ })();まで（３～９行目）を追加してやればその手間が省けます。
（ただし、「prettify.js」を読み込む全てのページ＝必要のないページでまで実行されてしまう、ということとのトレードオフです）

具体的な「prettify.js」の中身は、当ブログで使っているファイル（http://blog-imgs-57.fc2.com/k/o/m/komitsudo/prettify.js）を見ていただければと思います。

CSSは以下のとおりです。
.pln{color:#ccc}
pre.prettyprint{background:#2d2d2d;font-family:Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;font-size:12px;line-height:1.5;border:1px solid #ccc;padding:10px}
pre.prettyprint code {font-family:Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;margin:0; padding:0; border:0}
ol.linenums{margin-top:0;margin-bottom:0}
ol.linenums li{list-style:decimal outside;color:#999}
@media screen {
	.str{color:#9c9}
	.kwd{color:#c9c}
	.com{color:#999}
	.atv{color:#6cc}
	.var{color:#f2777a}
	.typ,.fun{color:#69c}
	.lit,.atn{color:#f99157}
	.pun,.opn,.clo,.tag,.dec{color:#ccc}
}
@media print,projection {
	.com{color:#600;font-style:italic}
	.typ{color:#404;font-weight:700}
	.lit{color:#044}
	.pun,.opn,.clo{color:#440}
	.atn{color:#404}
	.str,.atv{color:#060}
	.kwd,.tag{color:#006;font-weight:700}
}



６．実際の使い方

ハイライトしたい PREタグに prettyprint というクラス名を指定することで、ソースコードのカラーリングが適応されます。
<pre class="prettyprint">



基本的には上記を行うのみで勝手に Prettify の方でソースコードの中身を判別し、最適なハイライトにしてくれますが、より確実にするためには class 属性にヒントを付け加えます。
<pre class="prettyprint lang-html">


■属性のヒント
  • lang-html　…　HTML
  • lang-css　… CSS
  • lang-js … JavaScript



行番号を付け加える場合は、class 属性に linenums を付け加えます。
<pre class="prettyprint linenums">



７．備考

説明を簡単にするためにPRE要素に直下にコードを記述する例としていますが、よくある<pre><code>（何かのソースコード）</code></pre>という形式でも問題なく使えます。
<pre><code>とする場合は、CSSファイルでcodeにフォントやpaddingの設定をしていないか気をつける必要があります。


また、改行（改行コード）を自動的にbr要素（<br> や <br /> など）に変化させるサービス、例えばFC2ブログは自動で<br />に変わるのですが、この場合、そのままでは linenums の行番号付与がうまくいきません。
なぜなら、Prettify では改行があるまでを１行とみなすのですが、改行を<br />に変えられると、初めから終わりまで１行のソースコード、と判別するからです。

これを避ける方法として、br要素を改行コードに置換してやる必要があります。
以下のJavaScriptコードをページの最後などに追加してください。
<script type="text/javascript">
// <![CDATA[
var prettyElems = document.getElementsByClassName('linenums');
for (var i = 0; i < prettyElems.length; i++){
	var rangesrc = prettyElems[i].innerHTML;
	prettyElems[i].innerHTML = rangesrc.replace(/<br\s*\/?>/ig, "\n");
}
// ]]>
</script>


なお、上記のコードはありうる全てのbrタグを想定はしていません。
例えば、可能性は低いですが、<br clear="both">が混じっていた場合、それは改行コードに置換されませんので、ご注意ください。


【関連サイト、参考にしたページ】
・google-code-prettify（本家）
・Color themes for Google Code Prettify
・[JavaScript] google-code-prettify でのソースコードのハイライト表示についてまとめてみた