CodeMirror のテーマ

CodeMirror の編集パネルの外観をコントロールする CSSファイル は CodeMirror-master フォルダの中の theme フォルダに収めてあるが、その中身は非常に簡単だ。例えば elegant.css の内容は次のようになっている。

.cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom { color: #762; }
.cm-s-elegant span.cm-comment { color: #262; font-style: italic; line-height: 1em; }
.cm-s-elegant span.cm-meta { color: #555; font-style: italic; line-height: 1em; }
.cm-s-elegant span.cm-variable { color: black; }
.cm-s-elegant span.cm-variable-2 { color: #b11; }
.cm-s-elegant span.cm-qualifier { color: #555; }
.cm-s-elegant span.cm-keyword { color: #730; }
.cm-s-elegant span.cm-builtin { color: #30a; }
.cm-s-elegant span.cm-link { color: #762; }
.cm-s-elegant span.cm-error { background-color: #fdd; }

.cm-s-elegant .CodeMirror-activeline-background { background: #e8f2ff; }
.cm-s-elegant .CodeMirror-matchingbracket { outline:1px solid grey; color:black !important; }

たったこれだけだ。おそらく CodeMirror の編集パネルオブジェクトの部品の CSS クラス名が theme: "elegant" を指定することによって、CodeMirror() 関数で編集パネルオブジェクトを作成する際に、その部品のクラス名を付け替えるのだろう。これなら、他の CSS ファイルを下敷きにして自分用のテーマを作ることも可能だ。

CodeMirror の構成部品は高度にモジュール化されているので、その設定が非常に簡単にカスタマイズできるのではないかという気がしてきた。

CodeMirror の編集パネル自体の外観も CSS でコントロールできるらしい。CodeMirror : User Manual の Customizing Style の項には、外観をコントロールするための CSS セレクタ名が説明してある。そのうち、.CodeMirror クラスは編集パネルの width, heigth, border, positioning が CSS の宣言法でコントロールできる。他のクラスについてはよくわからなかったが、使い込んでいけば分かるのだろう。

少なくとも CodeMirror の編集パネル(エディタ)の外観をかなり細かく CSS でコントロールできることがわかった。

CodeMirror のエディタはテキストエリアに付加するのではなく、単体としての複雑な DOM 要素であることが分かったし、その外観を CSS でコントロールできることが分かったので、とりあえず使ってみるために残った必要な知識は、どうやってその DOM 要素を文字列として取り出し、どうやってその DOM 要素に文字列を送り込むかという問題だ。

それについては、CodeMirror : User Manual の Programming API に書いてある。手っ取り早く言うと、それらの機能は 編集パネルオブジェクトのメソッドとして定義されており、getValue() 関数で取り出しを、setValue 関数で文字列の送り込みをすることができる。

ここまで調べたかなりいい加減な調査で分かったのが、CodeMirror のエディタは CodeMirror 関数で作成される DOM 要素であって、その外観は CSS で、文字列の入出力は string = cm.getValu() や、cm.setValue(str) のようにオブジェクトのメソッドでコントロールできるということだ。エディタの DOM 要素とテキストエリアを関連付けることはできるが、文字列の編集については、テキストエリアの存在は必要ない。

これで、CodeMirror を利用するときのイメージができたので、あとは色々といじってみるだけだ。というわけで、CodeMirror が使えたという興奮状態がやや治まったので、CodeMirror 関連の記事もこれで終了する。仕事の合間に紹介記事を書くというのは、結構大変だからだ。


[PR]
by tnomura9 | 2016-01-19 08:21 | JavaScript | Comments(0)
<< CodeMirror のテンプレート 感動的に分かりやすい Code... >>