ソースコードを強調表示するシンタックス・ハイライトをブログに導入したくていくつか調べてみたんだけど、結局 google-code-prettify にした。行番号を入れたりのリッチな機能は必要なくて、シンプルにシンタックスの抽出をやってくれるものを探していたので。
導入にあたっては、hail2u.net の記事 を参考に Google の Closure Compiler を利用した。このブログで扱うソースコードというと HTML か CSS か JavaScript、まれに PHP といったところなので、コアである prettify.js のほかに lang-css.js を加えてコンパイルした。
カラーリングは頑張って微妙な色合いも試してみたけど、ことごとく挫折。最終的には CSS の color キーワード でざっくり指定するのがしっくりきた。
.prettyprint .kwd,
.prettyprint .tag { color: purple; }
.prettyprint .typ,
.prettyprint .atn { color: maroon; }
.prettyprint .str,
.prettyprint .atv { color: navy; }
.prettyprint .lit { color: blue; }
.prettyprint .pun { color: teal; }
.prettyprint .pln { color: black; }
.prettyprint .dec,
.prettyprint .com { color: green; }
なお、バージョン 8 未満の IE では改行が除去されてしまうというバグが発生する。
シカトしようかとも思ったけど、さすがにこれじゃ読んでいられないので、コンディショナル・コメントで対応した。「バージョン 8 以上の IE とそのほかのブラウザ」という条件なので、記述がちょっとややこしい。
<!--[if gt IE 7]><!-->
<script type="text/javascript" src="/js/google-code-prettify.js"></script>
<!--<![endif]-->