让 GitHub 识别定制的语言
GitHub 的语法高亮是通过 github/linguist 实现的, 实际上封装了 Pygments,
如果要让 GitHub 能对代码进行高亮, 就需要 Pygments 先支持这们语言,
然后, 在上述 repo 的 lib/linguist/languages.yml 文件里声明语言怎样识别,
一般是根据文件后缀进行区分, 有时也会进行更复杂的处理判断具体语言,
yamltype - data, programming, markup, or nil
lexer - lexer String (默认是语言名称)
aliases - aliases (implicitly includes name.downcase)
ace_mode - A String name of Ace Mode (if available)
wrap - Boolean wrap to enable line wrapping (default: false)
extensions - 相关的后缀名
interpreter - An Array of associated interpreters
primary_extension - 唯一的语言后缀名
searchable - Boolean flag to enable searching (defaults to true)
color - 10 进制的颜色.
Pygments 告一段落了, 现在是 Ace 的问题, 需要编写对应的插件
文档
Ace 的文档一个是在官网比较详细: http://ace.c9.io/
此外在 GitHub Wiki 上还有一些: https://github.com/ajaxorg/ace/wiki/_pages
相对来说源码提供的帮助也非常大, 已有的例子比较清晰,
插件开发流程
添加插件大致是要修改下面几个地方,
添加语言到 modelist
lib/ace/ext/modelist.js 里需要按格式填入 Cirru 对应的后缀,
在 kitchen-sink/ 页面进行调试时会用到 modelist 的内容.
添加示例的代码
我添加的代码是在 demo/kitchen-sink/docs/cirru.cirru
kitchen-sink/ 里调试时会用到这边的代码, 通过请求加载到编辑器里,
make build 执行时似乎也会引入这部分代码...
mode 文件
主要的语言配置文件在 ace/lib/ace/mode/ 下, 比如 cirru.js 控制 Cirru 的行为
主要的配置有 Folding, Indent, 通过覆写一些方法对具体逻辑进行调整,
另外语法高亮也从这个文件引入, 如果是沿用已有的模版, 要注意修改相关变量名.
再有一个是 Worker 可能涉及到, 是通过 Web Worker 在后台处理语法的,
在编写 Cirru 插件时, 遇到后台跑的 JSON Worker 没有删除, 会给我报错.
我不清楚具体功能, Cirru 里用不到, 临时去掉了代码. 文档倒是有:
https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode...
https://github.com/ajaxorg/ace/wiki/Syntax-validation
Indent 是 Cirru 里没做的, 相关代码也去掉了.
Folding 实现略复杂, 不过, Ace 提供了机制可以使用已有的其他 Style,
比如 JSON 集成了 CStyle 的 Folding, Cirru 于是继承了 CoffeeStyle.
$rules 文件
cirru_highlight_rules.js 是这样一个文件专门高亮语法.
文件也放在 ace/lib/ace/mode/. 平级有时可能还有其他的文件...
文档上例子讲得也比较清晰, 主要就是一些状态, 默认是 start:
http://ace.c9.io/#nav=higlighter
jsthis.$rules = {
"start" : [ {
token : "text",
merge : true,
regex : "
next : "cdata"
},
"cdata" : [ {
token : "text",
regex : "\\]\\]>",
next : "start"
}, {
token : "text",
merge : true,
regex : "\\s+"
}, {
token : "text",
merge : true,
regex : ".+"
} ]
};
每次匹配, 都会都数组里选取一条, 按 regex 进行匹配,
next 表示匹配当前项之后, 转到新的一个 state 去, 如此循环.
Ace 的 Token 是和 TextMate 保持一致的, 具体可看文档:
https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode...
因此考虑在 Theme 方面两者也有一些共通,, 还有 Sublime 也是..
调试
关于 $rules 的调试在 Creator 里做基本可以完成了
http://ace.c9.io/tool/mode_creator.html
完了手动复制到文件里去, 注意一些变量名可能要更改到对应 Cirru
ace/kitchen-sink.html 可以直接加载文件运行, 简单的 Nginx 静态服务器即可,
当然这个是在几个应对的文件修改完成以后..
build
暂时没去研究 build 用途.. 主要是对文件进行和合并的样子:
npm install
make build
合并后, index.html 可以打开直接运行, build/ace/kitchen-sink.html 也是
在 kitchen-sink.html 里打开的话, 就是下面这个样子: