前端代码编辑器ace 语法高亮

代码编辑器codemirror和ace，都有接触过，主要是简单的api使用下。现在项目选用的ace。主要结合官网的文档，加入些自己的理解。官方原文链接https://ace.c9.io/#nav=higlighter

配置mode

　　在线调试语法高亮 https://ace.c9.io/tool/mode_creator.html，可以自己练手下
　　在ace项目的lib/ace/mode文件夹中已经定义了很多mode.下面介绍配置一个新的mode，其中包括 语法高亮规则，缩进规则，代码折叠规则。

语法高亮规则

语法高亮的规则可以继承其他规则，通过oop.inherits(MyNewHighlightRules, TextHighlightRules)，比如php代码里面可以写html，所以继承HtmlHighlightRules。
ace高亮语法是一种状态机机制。每一个状态，里面可以包含多个 用正则表达式regex定义的token标记。token标记可以通过next属性决定下一个状态。

this.$rules = {
    stateName: [{
        token: token, // String, Array, or Function: the CSS token to apply
        regex: regex, // String or RegExp: the regexp to match
        next: next // [Optional] String: next state to enter
    }]
};            

this.$rules对象用来定义状态机的规则。开始规则定义为start状态，按顺序检测start的token列表。
当检测到regex匹配的时候，文本包裹成`<span class="ace_${token}">${文本}</span>`，在编辑器显示。

token=='function' => class="ace_function"
token=='support.function' => class="ace_support ace_function"

定义regex

regex属性可以是正则表达式，也可以是正则表达式的字符串，字符串需要注意\转义

{
    token : "constant.language.escape",
    regex : /\$[\w\d]+/
    regex : “\\$[\\w\\d]+”
}

regex与token关系

regex不存在捕获，token可以是String, Function返回字符串
token函数也可以用来对regex匹配的内容，再进行细分

{
    token: function(value) {
        if (colors.hasOwnProperty(value.toLowerCase())) {
            return "support.constant.color";
        } else if (fonts.hasOwnProperty(value.toLowerCase())) {
            return "support.constant.fonts";
        } else {
            return "text";
        }
    },
    regex: "\\-?[a-zA-Z_][a-zA-Z0-9_\\-]*"
}

regex存在捕获分组，token可以是String（所有分组都用一样的定义）, Array（长度和分组数量相同，与分组结果11对应）,或Function返回Array

{
  token : "constant",
  regex : "INT_MAX|INT_MIN"
} // INT_MAX -> constant(INT_MAX)

{
  token : ["constant", "keyword"],
  regex : "^(#{1,6})(.+)$"
} // ### Header -> constant(###), keyword( Header)

{
  token : "constant",
  regex : "(a+)(b)(\\1)"
} // aabaa -> constant(aabaa) :: abaa -> constant(aba) + a

{
  token : function (first, second) {
    if (first == "a") return ["constant", "keyword"];
    return ["keyword", "constant"];
  },
  regex: "(.)(world)"
} // aworld -> constant(a), keyword(world) :: bworld -> keyword(a), constant(world)

分组需要覆盖所有匹配结果，如果需要不匹配的话，请使用(?:), (hel)lo => (hel)(?:lo)

定义状态

语法高亮状态机，一般处于start状态，如果你定义了next，会流转到next指定的状态，一直流转下去。最后，应该回到start状态，对后面的文本继续进行检测。
可以理解是一个词法分析的过程。

this.$rules = {
    "start" : [{
        token : "text",
        regex : "<\\!\\[CDATA\\[",
        next : "cdata"
    }],
    "cdata" : [{
        token : "text",
        regex : "\\]\\]>",
        next : "start"
    }, {
        defaultToken : "text"
    }]
};

上面示例中，当检测到"<！[cdata["字符串，标记器从start状态移动到cdata状态,默认使用text标记，直到遇到关闭符号“]]>”，重新回到start状态继续检测。

扩展高亮规则

如果你的语法中间，可以通过（<?lua, <?php）标识符来嵌入其他语言块。Ace可以使用一些有用的函数来进行扩展

getRules 获取存在的规则

var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
this.$rules = new HtmlHighlightRules().getRules();

addRules 合并规则

this.$rules = {
    "start": [ /* ... */ ]
};

var newRules = {
    "start": [ /* ... */ ]
}

this.addRules(newRules, "new-");

/*
    this.$rules = {
        "start": [ ... ],
        "new-start": [ ... ]
    };
*/

embedRules 扩展规则

this.addRules(newRules, "new-") == embedRules(this.$rules, "new-", newRules);

var HtmlHighlightRules = require("./html_highlight_rules").HtmlHighlightRules;
var LuaHighlightRules = require("./lua_highlight_rules").LuaHighlightRules;

var LuaPageHighlightRules = function() {
    this.$rules = new HtmlHighlightRules().getRules();

    for (var i in this.$rules) {
        this.$rules[i].unshift({
            token: "keyword",
            regex: "<\\%\\=?",
            next: "lua-start"
        }, {
            token: "keyword",
            regex: "<\\?lua\\=?",
            next: "lua-start"
        });
    }
    this.embedRules(LuaHighlightRules, "lua-", [
        {
            token: "keyword",
            regex: "\\%>",
            next: "start"
        },
        {
            token: "keyword",
            regex: "\\?>",
            next: "start"
        }
    ]);
}

当遇到'<%='或‘<?lua=’，就到lua-start状态，就使用LuaHighlightRules去检测下面的文本，直到遇到"%>"， "?>"回到原来的HtmlHighlightRules;
上面例子会存在<%=?>的嵌套，存在些问题