Ace.js は、Webページに簡単に埋め込むことができるテキストエディタです。様々なプログラミング言語に対して、その記述をサポートする機能(シンタックスハイライトや自動インデントなど)が用意されており、Webページ上でのプログラミング用エディタの作成に適しています。

この記事の目的

Ace.js には、様々な言語をサポートする機能が既に用意されています。しかし、もちろんすべての言語に用意されてはおらず、サポートに含まれない言語も存在します。特に、研究目的で作られたプログラミング言語のような、マイナーな言語はサポートされていません。ただ、Ace には言語サポート機能を自作できる仕組みが用意されています。この記事では、R-WHILE というプログラミング言語に対して、シンタックスハイライト機能を作成します。

環境構築編

Ace の公式ドキュメントには、言語サポート機能を作成するための方法が記述されています。ここには、シンタックスハイライト規則や、インデント規則、コード折り畳み規則をどのように定義するのか記載されていますが、定義した規則を Ace で参照できるようにするための処理については詳しく説明されていません。環境構築編では、定義した規則を Ace で参照できる形式にする方法について公式ドキュメントであまり述べられていない部分を中心にまとめ、R-WHILE のシンタックスハイライト機能を作成する準備を行います。

言語サポート機能を作成する環境を構築する

言語サポート機能に必要なもの

Aceでは、言語の設定を setMode で読み込みます。この時、読み込みたい言語の設定ファイル(mode-読み込みたい言語名.js)が用意されている必要があります。例えば、次の例では mode-javascript.js が用意されている必要があります。

*.html

<script src="js/ace.js"></script>

<div id="editor" style="height: 700px; width: 500px"></div>

<script>
    var editor = ace.edit("editor");
    editor.session.setMode("ace/mode/javascript");
</script>

したがって、 mode-プログラム言語名.js を作成できるように環境を整えることが、環境構築編の目標です。以下では、R-WHILE を具体例として、mode-rwhile.js を作成する手順を示します。

mode-rwhile.js の作成

rwhile.js と rwhile_highlight_rules.js を作成する

公式ドキュメントには新しいモードを作成するためのテンプレートが示されています。これを参考に R-WHILE のモードを次のように記述します。ここで、ファイル名が rwhile.js であることに注意してください。

rwhile.js

define(function(require, exports, module) {
   "use strict";

   var oop = require("../lib/oop");
   var TextMode = require("./text").Mode;
   var Tokenizer = require("../tokenizer").Tokenizer;

   var RwhileHighlightRules = require("./rwhile_highlight_rules").RwhileHighlightRules;

   var Mode = function() {
      this.HighlightRules = RwhileHighlightRules;
   };
   oop.inherits(Mode, TextMode);

   exports.Mode = Mode;
});

上の rwhile.js では、テンプレートから、この記事では作成しない自動インデントとコード折り畳み機能に関わる部分を省いています。

rwhile_highlight_rules.js は R-WHILE のシンタックスハイライト規則を定義するためのファイルです。ここでは、具体的な規則はまだ定義せず、mode-rwhile.js 作成に必要な最小限の記述を行います。

rwhile_highlight_rules.js

define(function(require, exports, module) {
    "use strict";

    var oop = require("../lib/oop");
    var DocCommentHighlightRules = require("./doc_comment_highlight_rules").DocCommentHighlightRules;
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;

    var RwhileHighlightRules = function() {
       this.$rules = {
         "start" : [
            {
                token: token,
                regex: regex, 
                next:  next  
            }
         ]
       };
    };

    oop.inherits(RwhileHighlightRules, TextHighlightRules);
    exports.RwhileHighlightRules = RwhileHighlightRules;
});

以上で、mode-rwhile.js 作成に必要な最小限の記述が完了しました。

mode-rwhile.js を作成する

1. Ace をダウンロードする

mode-rwhile.js の作成には Ace でのビルドが必要になります。したがって、https://github.com/ajaxorg/ace から、Ace をダウンロードし、Ace に必要なライブラリをインストールします。

console

git clone https://github.com/ajaxorg/ace
cd ./ace
npm install

2. rwhile.js と rwhile_highlight_rules.js を Ace にコピーする

作成した rwhile.js と rwhile_highlight_rules.js を ace/lib/ace/mode にコピーします。

ace/
　├ lib/
　　└ ace/
　　　└ mode/
　　　　├ rwhile.js
　　　　└ rwhile_highlight_rules.js

3. Ace をビルドする

rwhile.js と rwhile_highlight_rules.js がコピーできたら、Ace をビルドします。ace ディレクトリで次のコマンドを実行します。