WebページでHTMLやJavaScriptを表示させる場合に厄介な問題がある。実際のソースコード、たとえばそれはHTMLやJavaScriptだったりするわけだが、実際に使われるそういったコード保守する必要があるほか、そのコードを表示させているHTMLの方に含まれているコードも保守する必要があるということだ。
大量のチュートリアルを作成している場合などは特に面倒なことになる。デモコードを書き換えるごとに、それを表示させているHTMLの方に含まれているコードも変更しなければならない。編集を忘れてしまえば実際に動作しているコードと表示されるコードが違うという事態にもなる。
同じことを考えるプログラマは多いようだ。Christian Heilmann氏は1月29日(米国時間)、Displaying source code with Ajaxのタイトルのもと、外部のファイルをインクルードして表示する方法を紹介している。この方法であれば対象は1つだけでいいため、2つのファイルを編集する必要がなくなる。
使うAjaxフレームワークはjQueryとajaxcodedisplay.jsファイルだ。a要素のclass指定で"codeexample"を指定すれば、リンク対象がインクルードされる仕組みになっている。
ajaxcodedisplay.jsは特定の行を指定してのインクルードもできる。class="codeexample lines[1,5,9-14,18-19]"のように記述すれば指定された行だけが表示される。
さらに特定の行をハイライト表示させることもできる。class="codeexample lines[10-15] highlight[10,12,14-15]"のように指定すればいい。
Christian Heilmann氏の紹介している方法は簡単に扱えるうえに効果的だ。同様の問題に悩んでいたWebデザイナやフロントエンドプログラマは同方法を検討してみてほしい。