Creating a new syntax highlighter for Ace is extremly simple. You'll need to define two pieces of code: a new mode, and a new set of highlighting rules.
为Ace创建一个新的语法高亮是非常简单的。你需要定义两块代码，一个新的模型和一个新的高亮规则集合。
Defining a Mode
Every language needs a mode. A mode contains the paths to a language's syntax highlighting rules, indentation rules, and code folding rules. Without defining a mode, Ace won't know anything about the finer aspects of your language.
定义一个模型
每一种语言需要一个模型，一个模型包括一种语言语法高亮规则，缩进规则和代码折叠规则的方式。没有定义的一个模型，Ace就不会知道任何关于你的语言的细节。
Here is the starter template we'll use to create a new mode:
这是一个开始的模板，我们可以来创建一个新的模型。
What's going on here? First, you're defining the path to TextMode (more on this later). Then you're pointing the mode to your definitions for the highlighting rules, as well as your rules for code folding. Finally, you're setting everything up to find those rules, and exporting the Mode so that it can be consumed. That's it!
这里发生什么好似了呢？首先，你定义了一个TextMode（更多详细在后面）方式。
然后，你把你定义的高亮规则、代码对折放到了这个模型当中。最后你通过一系列的设置找到他们的规则，然后再导出模型一边他可以被实行，就是这些。
Regarding TextMode, you'll notice that it's only being used once: oop.inherits(Mode, TextMode);. If your new language depends on the rules of another language, you can choose to inherit the same rules, while expanding on it with your language's own requirements. For example, PHP inherits from HTML, since it can be embedded directly inside .html pages. You can either inherit from TextMode, or any other existing mode, if it already relates to your language.
All Ace modes can be found in the lib/ace/mode folder.
对于TextMode,你会注意到只被使用一次：oop.inherits(Mode,TextMode),如果你的新语言依赖于其他语言的规则，你可以选择继承同样的规则，同时根据你自己的语言要求进行拓展。例如，PHP继承自己HTML，因为他可以直接嵌入到html页面里面去。你也可以继承TextMode,或者其他存在的模型，如果与你的语言有关联。所有的Ace模型都一个在/lib/ace/mode/folder目录下找到。
Defining Syntax Highlighting Rules
定义语法高亮规则
The Ace highlighter can be considered to be a state machine. Regular expressions define the tokens for the current state, as well as the transitions into another state. Let's define mynew_highlight_rules.js, which our mode above uses.
Ace高亮可以被看做机器的某个状态，正则表达式定义当前状态的特征。同时翻译成其他的状态。让我们定义mynew_highlight_rules.js使用到上述的模型当中。
All syntax highlighters start off looking something like this:
所有的语法高亮开始可以像这样子来看：
define(function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
var MyNewHighlightRules = function() {
// regexp must not have capturing parentheses. Use (?:) instead.
// regexps are ordered -> the first match is used
this.$rules = {
"start" : [
{
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
}
]
};
};
oop.inherits(MyNewHighlightRules, TextHighlightRules);
exports.MyNewHighlightRules = MyNewHighlightRules;
});
The token state machine operates on whatever is defined in this.$rules. The highlighter always begins at the start state, and progresses down the list, looking for a matching regex. When one is found, the resulting text is wrapped within a <span class="ace_<token>"> tag, where <token> is defined as the token property. Note that all tokens are preceded by the ace_ prefix when they're rendered on the page.
机器上运行的所有指令状态都被定义在this.$rules中。高亮总是从start状态开始，按照列表一个一个往下执行，需找匹配的regex。当找到一个，就把结果文本装入标记中（“<span class=’ace_token’>”）,这里的token被定义为token属性。注意，所有的token都有ace_的前缀，在他们被关联的页面。
Once again, we're inheriting from TextHighlightRules here. We could choose to make this any other language set we want, if our new language requires previously defined syntaxes. For more information on extending languages, see "extending Highlighters" below.
另外，我这里继承了TextHighlightRules。如果我们新的语言要求预先定义的语法，我们可以选择将他放到其他语言中设置成我们想要的。更多关于语言继承的信息，可以查看“exetending Hightlighters”.
Defining Tokens
The Ace highlighting system is heavily inspired by the TextMate language grammar. Most tokens will follow the conventions of TextMate when naming grammars. A thorough (albeit incomplete) list of tokens can be found on the Ace Wiki.
For the complete list of tokens, see tool/tmtheme.js. It is possible to add new token names, but the scope of that knowledge is outside of this document.
Multiple tokens can be applied to the same text by adding dots in the token, e.g. token: support.function wraps the text in a <span class="ace_support ace_function"> tag.
定义指令
Ace高亮系统受到了TextMate语言语法的很大启发。大部分指令的命名都参照了Textmate约定。大部指令都是按照TextMate的命名语法的约定来命名的。详细的指令列表可以在Ace Wiki上找到。
如果需要完整的指令列表，查看tool/tmtheme.js。这里可以添加新的指令名称，但是他的知识范围在这个文档之外了。
多个指令可以通过点号（.）来接受相同的文本在指令里面。例如token:support.function被包装成<span class=’ace_support ace_function’>
Defining Regular Expressions
Regular expressions can either be a RegExp or String definition
If you're using a regular expression, remember to start and end the line with the / character, like this:
{
token : "constant.language.escape",
regex : /\$[\w\d]+/
}
定义正则表达式
正则表达式可以是正则对象或者字符串。如果你使用一个正则表达式，是以“/”字符开始和结束，像这样
{
token : "constant.language.escape",
regex : /\$[\w\d]+/
}
A caveat of using stringed regular expressions is that any \ character must be escaped. That means that even an innocuous regular expression like this:
需要注意的是使用字符串形式的正则表达式，“\”字符需要被转义，也就是说即使任何类似于这样子的正则表达式regex: "function\s*\(\w+\)"，实施上必须是regex: "function\\s*\(\\w+\)"
未完待续....
扫一扫
3418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
