CodeMirror

Ubiquity 0.1.2を入れてみた。んで、コードエディター内のコードがハイライトされることに驚いた。
興味がわいてソースコードを見てみると、codemirror.jsというのが使われている様だ。
こいつは何だ？ ってことで検索するとFirebugの機能を拡張する | OSDN Magazineが引っかかる。どうもRainbow for Firebugにも使われているJavaScriptパーサ & ハイライトをするライブラリらしい。

• CodeMirror: In-browser code editing
  • CodeMirror: JavaScript demonstration(実際のエディタの例)

ちょっと前からこの手のエディタがどうやって実現させているか気になっていたので、中身をもう少し探ってみた。

1. HTMLにはtextareaが用意されていれば良い
2. textarea要素を引数にライブラリを使用すると、textareaがiframeに置き換わる
3. iframe内のドキュメントに対して、document.designMode = "on"(IEの場合はdocument.body.contentEditable = "true" ?)をする。
   • これをすることでドキュメント内にアイビーム（カーソル）が現れ、コンテンツの編集が可能になる。
4. keydown,keypress等のイベントを受け取る
5. イベントを元にiframe内のドキュメントにコンテンツを継ぎ足していく(Enterが押されたらカーソル位置に<br>を入れるなど)
6. 最後にコードをパースしてハイライト

こんな感じのことをしている様だ。
ライセンスもBSDなので扱いやすいし。もう少し研究してみる。最終的には、JShellに組み込めたら良いなと思っている。