Daily Archives: 2011年10月14日

テキストエリアのソースコードの強調表示に適した「CodeMirror」

この記事で紹介する「CodeMirror」は、<textarea>タグを使ったテキストエリアに表示されるソースコードの強調表示に適したJavaスクリプトライブラリである。 公開中のWordPress用プラグイン「CodeMirror for CodeEditor」でも、このライブラリを使用している。 「WP SyntaxHighlighter」でも、同様にソースコードを強調表示する「SyntaxHighlighter」と言うライブラリを使用しているが、「SyntaxHighlighter」が任意の場所のソースコードを対象しとているのに対して、「CodeMirror」は、<textarea>タグを使ったエディタ上のソースコードの強調表示に適している。 「WordPress」を例に上げると、「SyntaxHighlighter」が記事内のソースコードなどフロントエンドの強調表示に適しているのに対して、「CodeMirror」は、ダッシュボード上のテーマエディターやプラグインエディターに適していると言える。 テキストエディタでも、強調表示に対応したものが多いが、「CodeMirror」は、それと同様の事をウェブベースのテキストエディタ上で実現できる。 「CodeMirror」は、バージョン0.x系のリリースが続いた後に「CodeMirror 1.0」と「CodeMirror 2.0」が同時にリリースされているが、「1.0」と「2.x」ではAPIに違いがあるので互換性がない。 作者によると、今後は「CodeMirror 2.x」の方に力を入れていくようであるため、この記事では、「CodeMirror 2.x」について書く。 「CodeMirror」は、制限が少ないMITライセンスと互換性があり、様々なシステムの中で利用し易い。 「CodeMirror 2.x」には、コアのJavaスクリプト、コアのCSSの他、見た目を変えるための各テーマ用のCSS、各言語を定義したJavaスクリプトが含まれている。 ダウンロードファイルのうち、実際に必要なファイル群は、下記の通りである。 libフォルダ・・・基本的なJavaスクリプトとCSS。 themeフォルダ・・・各テーマ用CSS。 modeフォルダ・・・各言語を定義したJavaスクリプト。 ウェブサイトへの導入は、それほど難しくない。 まず、ヘッダ部分で下記のCSSとスクリプトを読み込む。パスは自身の環境に合わせて変更すること。 <link rel=”stylesheet” href=”lib/codemirror.css”> <link rel=”stylesheet” href=”theme/default.css”> <script src=”lib/codemirror.js”></script> <script src=”mode/css/css.js”></script> <script src=”mode/javascript/javascript.js”></script> <script src=”mode/xml/xml.js”></script> <script src=”mode/htmlmixed/htmlmixed.js”></script> 「codemirror.css」は、コアのCSSであり、読み込みは必須。 上記の例では、テーマは「default」を使用しているが、他のテーマを使用する場合は、「default.css」に加えて、そのテーマのCSSを読み込むようにする。 「codemirror.js」が、コアのJavaスクリプトになる。 4行目以降で、言語を定義するJavaスクリプトファイルを読み込む。 例では、CSS、Javaスクリプトが混在したHTMLを強調表示するために「htmlmixed.js」を使っているが、この場合は「css.js」、「javascript.js」、「xml.js」の後で読み込む必要がある。 このように「CodeMirror」では、複数の言語が混在するテキストを強調表示することも出来る。 PHPなどC言語に近い構文を持つ言語をサポートする「clike.js」を使う際にも、Javaスクリプトを読み込む順序が問題になるが、言語を定義するJavaスクリプトと同じフォルダに実行サンプルの「index.html」が収まっているので、このソースを確認すると良いだろう。 続いて、ページの後半、テキストエリア部分より後ろに、下記を記述を追加する。 <script> var editor = CodeMirror.fromTextArea(document.getElementById(“code”), { mode: “text/html”, theme: “default”, indentUnit: 4, indentWithTabs: false, tabMode: “shift”, enterMode: “keep”, electricChars: false, lineNumbers: true, firstLineNumber: 1, gutter: false, fixedGutter:false, matchBrackets: true }); </script> 2行目で、<textarea>タグのid属性の属性値を記述する。例では「code」になっている。 3行目以降は、パラメーターの定義である。 以下に、パラメーターの一部をまとめる。 mode・・・言語を言語名またはMINEタイプで指定。値:”javascript”、”text/javascript”等。 theme・・・テーマを指定。値:”default”/”cobalt”/”eclipse”/”elegant”/”neat”/”night”。 identUnit・・・タブによるインデントのサイズを半角スペースの数で指定。値:数値。 indentWithTabs・・・行の先頭の半角スペース8個分が1つのタブで置き換えられる。値:true/false。 tabMode・・・Tabキーを押した時の動作を指定。値:”classic”/”shift”/”indent”/”default”。 enterMode・・・改行した時の動作を指定。値:”indent”/”keep”/”flat”。 electricChars・・・構文上、意味を持つ「{ }」などが入力された際に、自動的にインデントする。値:true/false。 lineNumbers・・・行番号の表示、非表示。値:true/false。 firstLineNumber・・・行番号の開始番号。値:true/false。 gutter・・・「gutter」は、行番号の表示エリアを指すが、厳密には、行番号をクリックすることで印を付ける事が出来るマーカーエリアの表示、非常の指定。「true」ならlineNumbersが「false」の場合も「gutter」は表示される。値:true/false。 fixedGutter・・・「true」なら水平スクロールバーでスクロールしても、「gutter」は表示されたままになる。値:true/false。 matchBrackets・・・「true」なら「(」、「)」、「{」、「}」、「[」、「]」が選択された時に、対応する括弧と共に強調表示する。値:true/false。 なお、動作と記述は、配布サイトのデモページやダンロードファイルのdemoフォルダ内のファイルで確認できる。 以下のサンプルでは、ドロップダウンリストでテーマの変更、「Esc」または「F11」キーで、通常モード/フルスクリーンモードの切り替えが可能になっている。 <!doctype html> <?xml version=”1.0″ encoding=”UTF-8″?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html … 続きを読む →

Posted in ネット・PC | Tagged | Leave a comment