ソースコードのハイライトに google-code-prettify を導入してみる
これまで当ブログのソースコードのハイライトには 「CodePress」を使ってたんですが、IE と Firefox でしかちゃんと動かないみたいなんですよね。
まぁ、導入したのが2007年12月ですから、「もしかしてヴァージョンアップすれば良くね？」と思ったんですが・・・。なんと！ドメインが売りに出されていました。お～ぃ。
念のためググってみたら、SourceForge にソースあったんだけど、最終リリースが「2007-09-26」だし・・・。
とはいえ、IE と Firefox でしかまともに動かないのも困りものなので、google-code-prettify を導入してみることにしました。
実は2007年12月の時点で「google-code-prettify」の導入を検討してたんですねぇ、私。すっかり忘れてましたけど。
当時のエントリーによると「BODYタグ に細工をしないといけないので、導入を断念」したとか。いや～、知識がないってのはそういうもんなんですねぇ。今だと「イベントリスナーに追加する方法も書いてあるじゃん！」てことが解るわけですから、僕も多少は進歩してたようです。
さて、導入の手順ですが
- ダウンロードしたＺＩＰファイルを解凍します。
- srcフォルダ内のファイルをブログにアップします（例：/js/prettify/）。
- タイプリスト（メモ）に読み込むためのソース記述し、保存します。
保存するソースのサンプルは以下のとおりです。
<link href="/js/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/prettify/prettify.js"></script>
<script type="text/javascript">
addEventListener('load', prettyPrint, false);
</script>
使い方は、ハイライトする部分をPREタグに入れて、prettify用のクラスを指定すればOK。ちなみにソース内の < は < に変換しておいた方がよさげです。
例えば、こんなコードが
<pre class="prettyprint lang-perl">
#!/usr/bin/perl
use strict;
use warnings;
print "Hello World!";
</pre>
こう表示されます。
#!/usr/bin/perl
use strict;
use warnings;
print "Hello World!";
うん。いい感じ。
参照リンク
・google-code-prettify - Project Hosting on Google Code
・MOONGIFT: ≫ Google Codeで使われているソースコードハイライタ「Google Code Prettify」:オープンソースを毎日紹介
