(ただしbloggerに導入する方法はまた別の話なので、下のコードサンプルはWeb上にあるSSSHで変換したものです。)
 |
| CodeMirrorによる入力補完 |
プロジェクトディレクトリを作成
プロジェクトディレクトリ的なものを作り、シンプルな index.html を作成しておきます。CodeMirrorはHTML, CSS, JavaScriptしか使用しないので、apacheなどのWebサーバがなくても、index.html ほか必要なファイルを格納したディレクトリがあれば、CodeMirrorを試すことができます。
今回はUbuntu12.04上でapache2を使用している前提で説明を行います。そうでない方は適切にディレクトリパスを読み替えてください。
管理者権限が必要ですが、以降、適切なパーミッションを設定して作業してください。
$ mkdir -p /var/www/prj/
$ cd /var/www/prj/
$ vim /var/www/prj/index.html
CodeMirrorを入手
CodeMirrorを導入します。公式サイトから圧縮ファイルを取得しても良いのですが、今回はGitを使いました。
プロジェクトディレクトリに入った状態で git clone します。
$ git clone https://github.com/marijnh/CodeMirror.git
本番サイトでは、必要な最低限の lib, mod, css ファイルだけを置くべきなのですが、今回は公開するのではなく導入して動作確認するだけなので、すべて入ったリポジトリをページのディレクトリ直下に置いてしまいます。
CodeMirrorサンプルの確認
CodeMirroのソースには、多くのサンプルページが付属しています。今回はHTML5をオートコンプリートするサンプルを参考にしました。でもページのファイルは「 CodeMirror/demo/html5complete.html 」です。
デモは公式のデモページ、またはオフラインでも見ることができます。
(該当サンプルはHTML5を対象としているので、JavaScriptとcssも効果が有効になっています。)
プロジェクトディレクトリの準備の項目と同じ条件で作っていれば、ブラウザで
http://localhost/prj/CodeMirror/demo/html5complete.html
にアクセスすれば、公式デモと同じページをオフラインで見ることができると思います。
このサンプルは、devタグ要素を置き換えてtextareaを作成し、サンプルコード自身を読み込んで表示するという仕組みになっています。
実際にCodeMirrorを使用するにあたっては、これらの設定を書き換える必要があります。
CodeMirrorを使う
index.htmlに組み込む
WebページをHTMLで書いて、その中でCodeMirrorを呼び出します。HTMLソースはページの下に置いておきました。
オートコンプリートのキーバインドは、サンプルで割り当てられている Ctrl+Space とします。
Ubuntuデスクトップの場合、Ctrl+Spaceには日本語入力モード切り替えのショートカットが割り当てられています。このままではCodeMirrorのオートコンプリートを試すことができないので、設定を削除しておきます。
サンプルページの確認方法
以上の手順が済んでいれば、あとはCodeMirrorの動作を確認するだけです。Apache2 Webサーバを導入して上記ディレクトリ構成に配置した場合、
http://localhost/prj/CodeMirror/demo/html5complete.html
にて作成したサンプルページを確認することができます。
ApacheなどのWebサーバを導入していない場合でも、前述の通りCodeMirrorおよび今回のサンプルはJavaScriptのみを使用しているため、index.htmlをブラウザで直接開けば動作を確認することができます。
 |
| HTML要素の補完候補を表示 |
サンプルプロジェクトの構成
サンプルプロジェクトのディレクトリ構成
/var/www/ (apache2 のディレクトリ)prj/ (プロジェクトディレクトリ)
index.html (ページ本体)
CodeMirror/ (CodeMirrorのリポジトリ)
mods/ (CodeMirrorのリポジトリ)
libs/ (CodeMirrorのリポジトリ)
index.html ソース
<!doctype html>
<html>
<head>
<!-- CodeMirrorのコア部分を読み込む -->
<script src="CodeMirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="../CodeMirror/lib/codemirror.css">
<script src="CodeMirror/mode/javascript/javascript.js"></script>
<!-- 使用したい言語のアドオンを読み込む -->
<link rel="stylesheet" href="../CodeMirror/addon/hint/show-hint.css">
<script src="../CodeMirror/addon/hint/show-hint.js"></script>
<script src="../CodeMirror/addon/hint/xml-hint.js"></script>
<script src="../CodeMirror/addon/hint/html-hint.js"></script>
<script src="../CodeMirror/mode/xml/xml.js"></script>
<script src="../CodeMirror/mode/javascript/javascript.js"></script>
<script src="../CodeMirror/mode/css/css.js"></script>
<script src="../CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>
CodeMirror Test.<br>
<br>
<!-- CodeMirrorで効果を加える対象のテキストエリア(ID属性を付与) -->
<textarea id="myTextarea"></textarea>
<!-- CodeMirror適用。対象のtextareaをID属性で指定 -->
<!-- HTMLの表示と入力補助、入力補完、行番号を有効化 -->
<script type="text/javascript">
var myCodemirro = CodeMirror.fromTextArea(
document.getElementById('myTextarea'), {
mode: 'text/html',
extraKeys: {"Ctrl-Space": "autocomplete"},
lineNumbers: true
});
</script>
</body>
</html>
<html>
<head>
<!-- CodeMirrorのコア部分を読み込む -->
<script src="CodeMirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="../CodeMirror/lib/codemirror.css">
<script src="CodeMirror/mode/javascript/javascript.js"></script>
<!-- 使用したい言語のアドオンを読み込む -->
<link rel="stylesheet" href="../CodeMirror/addon/hint/show-hint.css">
<script src="../CodeMirror/addon/hint/show-hint.js"></script>
<script src="../CodeMirror/addon/hint/xml-hint.js"></script>
<script src="../CodeMirror/addon/hint/html-hint.js"></script>
<script src="../CodeMirror/mode/xml/xml.js"></script>
<script src="../CodeMirror/mode/javascript/javascript.js"></script>
<script src="../CodeMirror/mode/css/css.js"></script>
<script src="../CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
</head>
<body>
CodeMirror Test.<br>
<br>
<!-- CodeMirrorで効果を加える対象のテキストエリア(ID属性を付与) -->
<textarea id="myTextarea"></textarea>
<!-- CodeMirror適用。対象のtextareaをID属性で指定 -->
<!-- HTMLの表示と入力補助、入力補完、行番号を有効化 -->
<script type="text/javascript">
var myCodemirro = CodeMirror.fromTextArea(
document.getElementById('myTextarea'), {
mode: 'text/html',
extraKeys: {"Ctrl-Space": "autocomplete"},
lineNumbers: true
});
</script>
</body>
</html>
上のカラーリングはCodeMirrorではなく、自作した静的ハイライト生成サービスの SSSH を使っています。
JavaScriptを使わずに静的にシンタックスハイライトしたい場合や、CodeMirrorを導入できない環境である方は、そちらをどうぞ。
