WebページでHTMLやJavaScriptを表示させる場合に厄介な問題がある。実際のソースコード、たとえばそれはHTMLやJavaScriptだったりするわけだが、実際に使われるそういったコード保守する必要があるほか、そのコードを表示させているHTMLの方に含まれているコードも保守する必要があるということだ。

大量のチュートリアルを作成している場合などは特に面倒なことになる。デモコードを書き換えるごとに、それを表示させているHTMLの方に含まれているコードも変更しなければならない。編集を忘れてしまえば実際に動作しているコードと表示されるコードが違うという事態にもなる。

同じことを考えるプログラマは多いようだ。Christian Heilmann氏は1月29日(米国時間)、Displaying source code with Ajaxのタイトルのもと、外部のファイルをインクルードして表示する方法を紹介している。この方法であれば対象は1つだけでいいため、2つのファイルを編集する必要がなくなる。

jQueryを使って外部ファイルをインクルードする - 同サイトより抜粋

使うAjaxフレームワークはjQueryとajaxcodedisplay.jsファイルだ。a要素のclass指定で"codeexample"を指定すれば、リンク対象がインクルードされる仕組みになっている。

HTMLファイルをインクルードする - 同サイトより抜粋

インクルード表示されたHTML - 同サイトより抜粋

ajaxcodedisplay.jsは特定の行を指定してのインクルードもできる。class="codeexample lines[1,5,9-14,18-19]"のように記述すれば指定された行だけが表示される。

表示する行数も指定する場合 - 同サイトより抜粋

指定された行だけが表示される - 同サイトより抜粋

さらに特定の行をハイライト表示させることもできる。class="codeexample lines[10-15] highlight[10,12,14-15]"のように指定すればいい。

特定の行をハイライト表示させる場合 - 同サイトより抜粋

特定の行がハイライト表示されている - 同サイトより抜粋

Christian Heilmann氏の紹介している方法は簡単に扱えるうえに効果的だ。同様の問題に悩んでいたWebデザイナやフロントエンドプログラマは同方法を検討してみてほしい。