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

CodeMirrorで独自言語のシンタックスハイライトを使う①

前回の記事で、CodeMirrorが独自言語のシンタックスハイライトに使えそうだという話を書きましたので、大まかにやり方を書いてみます。
今回は、単純にCodeMirrorを導入するところです。


エディタを作る

エディタを作るには、まずCodeMirrorのプロジェクトの中の、【codemirror.min.js】と【codemirror.min.css】とをHTML内で読み込みます。
加えて、プロジェクト内のmodeフォルダの中の、扱いたい言語に対応するjsファイルを読み込みます。
その後、scriptを使ってCodeMirror.fromTextArea()を呼び出せば、指定したテキストエリアをシンタックスハイライト付きのエリアに変更できます。

CSSとしてハイライトされたテキストエリアを表示するスクリプト

<!doctype html>
<html>
    <head>
        <title>テストページ</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/css/css.min.js"></script>
    </head>
    <body>
        <textarea id="cssarea">body{background:"red"}</textarea>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("cssarea"),{mode: "css"});
</script>
    </body>
</html>

ちなみにこのコードでは、cdnjs.comで公開されているCodeMirrorのスクリプトを利用させて貰っています。CDNスクリプトは、場合によっては提供停止になる場合もありますので、一応注意はしておきましょう。


preタグにハイライトを施す

やることの複雑さから言えば順序が逆な感じがしますが、今度はpreタグで書いたコードにハイライトを施してみます。
先ほどと同様、CodeMirrorのCSSとJS、それと言語のJSファイルが必要ですが、それに加えて、CodeMirrorのaddonフォルダから、【runmode.js】と【colorize.js】を読み込みます。

そして、scriptでCodeMirror.colorize()を呼び出します。

<!doctype html>
<html>
    <head>
        <title>テストページ</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/runmode/runmode.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/runmode/colorize.min.js"></script>
    </head>
    <body>
        <pre id="csspre" data-lang="css">body{background:"red"}</pre>
<script>
CodeMirror.colorize([document.getElementById("csspre")]);
</script>
    </body>
</html>

CodeMirrorは、引数を渡さなければ、自動的に文書内のpreタグを探し、data-lang属性を読み取り、そこで示された言語に合わせて色づけを行います。引数としてDOMオブジェクトの配列を渡すと、そのオブジェクトに対して色付けを行います。

このページに関してはpreは一つしかないので引数は渡さなくても良いのですが、一応分かりやすく渡す形のコードとしました。
(実は、はてなブログ等でCodeMirrorを使う場合にはこの指定は結構重要なのです。)


基本的なCodeMirrorの使い方はこんな感じです。
そして、この記事ではcss.min.jsを読み込むことでCSSのハイライトを行っていますが、独自の言語を定義するスクリプトを自作して使うことも出来ます。
それについてはまた次回書こうかと思います。