プログラミングなどに関する、ひらう子のブログです

独自言語のハイライトにCodeMirrorが使えそうだという話

このブログではしつこい位に書いておりますが、現在私は、altHTMLである【HTMLSea】を開発中です。

独自言語を開発して発表しようとすると、Webでもシンタックスハイライトを施して表示出来ればと自然に思うようになります。

何せ、独自言語というのは、見る人にとっては初見の言語となる訳です。未知の言語のコードであっても、ハイライトされているだけで、大まかな文法やコンセプトがかなり理解しやすくなります。逆に、ハイライトされていないコードは、目が滑り理解しづらいものです。

一応、Webに載せるコード全てに手作業でハイライトをほどこしたり、もしくはコンパイラに手を加えてハイライトされたHTMLを加える事も出来なくはないのですが、あまりにも大変なのでやりたくはありません。

そこで、Javascriptでコードにハイライトを施せるライブラリを探してみました。


いくつか調べてみたところ、使えそうなのがCodeMirrorというJavascriptライブラリです。

codemirror.net

このライブラリなら、色々な言語のコードをハイライトする事が出来ますし、自分でハイライト定義スクリプトを書けば、独自言語のハイライトを施すことも出来ます。表示もシンプルなので使い勝手が良さそうです。
また、テキストエリアのように編集可能なボックスを、リアルタイムにハイライトすることも出来ます(…というより、それがメイン機能です)。これなら、独自言語をWebインターフェイスで試して貰うための、Web sandboxアプリを設置する際にも使えますね。


そんな訳で、このCodeMirrorで色々試してみましたが、やはり、かなり良いプログラムです。大雑把なHTMLSeaのハイライトを定義するスクリプトも書いてみましたが、割と簡単に、思ったとおりのハイライトが出来ました。

今後のHTMLSea開発は、HTMLSeaのコンパイラ自体を作りつつ、CodeMirrorを使ってHTMLSeaコードをこのブログ内などで綺麗に表示するための作業もやっていくことになりそうです。