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

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のハイライトを行っていますが、独自の言語を定義するスクリプトを自作して使うことも出来ます。
それについてはまた次回書こうかと思います。

独自言語のハイライトにCodeMirrorが使えそうだという話

このブログではしつこい位に書いておりますが、現在私は、altHTMLである【HTMLSea】を開発中です。

独自言語を開発して発表しようとすると、Webでもシンタックスハイライトを施して表示出来ればと自然に思うようになります。

何せ、独自言語というのは、見る人にとっては初見の言語となる訳です。未知の言語のコードであっても、ハイライトされているだけで、大まかな文法やコンセプトがかなり理解しやすくなります。逆に、ハイライトされていないコードは、目が滑り理解しづらいものです。

一応、Webに載せるコード全てに手作業でハイライトをほどこしたり、もしくはコンパイラに手を加えてハイライトされたHTMLを加える事も出来なくはないのですが、あまりにも大変なのでやりたくはありません。

そこで、Javascriptでコードにハイライトを施せるライブラリを探してみました。


いくつか調べてみたところ、使えそうなのがCodeMirrorというJavascriptライブラリです。

codemirror.net

このライブラリなら、色々な言語のコードをハイライトする事が出来ますし、自分でハイライト定義スクリプトを書けば、独自言語のハイライトを施すことも出来ます。表示もシンプルなので使い勝手が良さそうです。
また、テキストエリアのように編集可能なボックスを、リアルタイムにハイライトすることも出来ます(…というより、それがメイン機能です)。これなら、独自言語をWebインターフェイスで試して貰うための、Web sandboxアプリを設置する際にも使えますね。


そんな訳で、このCodeMirrorで色々試してみましたが、やはり、かなり良いプログラムです。大雑把なHTMLSeaのハイライトを定義するスクリプトも書いてみましたが、割と簡単に、思ったとおりのハイライトが出来ました。

今後のHTMLSea開発は、HTMLSeaのコンパイラ自体を作りつつ、CodeMirrorを使ってHTMLSeaコードをこのブログ内などで綺麗に表示するための作業もやっていくことになりそうです。

HTMLSeaと、現状の開発について

現在開発中のHTMLSeaですが、一言で言えば、手軽にHTMLを書く為の言語です。

立ち位置としてはhamlなどのaltHTML系言語に近いのですが、特徴は、文法上の入れ子が深くなりにくい事です。


一般的なaltHTML系言語はhtmlのタグの入れ子構造がそのままインデントの深さになるので、行が長くなり、テキストエディタでは改行されて見づらくなることが多いです。特に、タグの入れ子構造の末端であるテキストは、深いインデントでかなり行の右側に追いやられがちです。

それに対し、HTMLSeaは、テキストは基本的にインデント無しで書く文法なのに加えて、タグを記述する際に、複数階層のタグをまとめて記述する機能があるので、入れ子構造が文法的に深くなりにくいです。

↓ HTMLSeaのコードと、コードから生成されるHTML

* $.outer > .inner
ひとつめのinnerクラス
* $.outer > .inner
ふたつめのinnerクラス

(行頭の「*」はタグを記述する行であることを表し、「$」は、同じ階層に同じタグがあれば新しくタグを作らないという記号)

<div class="outer">
    <div class="inner">ひとつめのinnerクラス</div>
    <div class="inner">ふたつめのinnerクラス</div>
</div>

実は、昨年、HTMLSeaという言語を作ったという話をQiitaで記事として書いたりしています。
qiita.com
ただ、この記事からリンクを貼ったsandboxは現在停止しています…。以前にサーバを再構築した際に再度立ち上げるのを忘れていたのです。
当時このsandboxで使用したコンパイラはまだPython3に対応していなかったので、現在、コンパイラをPython3で書いているところです。


そんな訳で、ひととおり動くコンパイラが仕上がった時点で、sandboxを再構築する予定です。

HTMLSeaのシンタックスハイライトを強引に…

現在、私はHTMLSeaという言語を開発しておりまして、おそらく今後、このブログでHTMLSeaのコードを載せることは多いと思います。

ブログ中で書くならシンタックスハイライト(色分け)ができればとても読みやすいのですが、そこは個人開発中の言語です。はてなブログにHTMLSeaの自動ハイライト機能などある筈がありません。
そんな訳で、現在はてなブログで自動ハイライトが実装されている言語のうち、ハイライト方式がHTMLSeaと相性が良いものがないか探してみました。


結論としては、fasmが良さそうです。Flat Assembly。アセンブリ系言語です。
↓fasmとしてハイライトされたHTMLSeaコード

* !doctype:html5
* $html > $head > title |○○のページ
* $html > $body > #wrapper
** h1
○○のページ
** #menu > a.link[href="/"]
トップへ
** #menu > a.link[href="/about.html"]
このサイトについて

単純に記号に色を付けてくれる感じなので、変なハイライトになることはなさそうかなという印象です。

まあ本来はfasmに使うべきハイライト機能を使うことになるので、もしかしたらこのブログがfasm関連のブログとしてはてなに認識される可能性もなくはないのですが・・・。とりあえずしばらくはこれでいこうかなと思います。

IT技術系でブログはじめます

ひらう子です。プログラミング関連に話題をしぼったブログを始めることにしました。

技術系の話は、ツイッターでちょろちょろ書いてるだけでは中々伝わらないので、ブログという形でちょいちょいアウトプットしていこうというわけです。

差しあたりは、PythonとJarascriptで開発しているWebサービスや、HTMLをより簡単に記述する為の言語として開発しているHTMLSeaのことについて書いていくと思います。