闲谈Monaco Editor-自定义语言之Monarch

什么是Monarch

Monarch 是 Monaco Editor 自带的一个语法高亮库，通过它，我们可以用类似 Json 的语法来实现自定义语言的语法高亮功能。本文将通过编写一个简单的自定义日志语言（下文简称 log ）来介绍 Monarch 的使用。

开始

初始化

首先，我们需要在 monaco 里注册一下我们的 log 语言。

monaco.languages.register({ id: 'log' });
复制代码

很简单，我们只需要传入语言的 id 即可，但是，现在这个语言除了有个名字，还空空如也，所以，接下来，我们就要开始给 log 语言加上我们的语法高亮功能。

monaco.languages.setMonarchTokensProvider('log', monarchObj);
复制代码

monaco 提供了setMonarchTokensProvider函数来让我定义语言的高亮功能，而monarchObj就是我们所需要填写的 Monarch 所规定的 Json 内容。

Monarch

Monarch 由一系列 Json 键值对组成，他有许多属性，其中最重要的就是 tokenizer 属性，我们描述语法的代码就写在这里面。先来看一个简单的例子：

monaco.languages.setMonarchTokensProvider('log', {
	tokenizer: {
		root:[
			[/\d+/,{
   token:"keyword"}],
			[/[a-z]+/,{
   token:"string"}]
		],
	}
});
复制代码

我们在 tokenizer 中定义了一个 root 属性，root 是 tokenizer 中的一个 state , 这就是我们用来编写解析规则（rule）的地方，在 rule 中，我们可以编写匹配文本的正则表达式，然后再给匹配到的文本设置一个执行动作的 action ，在 action 中，我们可以给匹配到的文本设置 token class 。

在我们的例子中，我们在 root 中设置了两个 rule ，分别用来匹配数字和字母，匹配成功后就接着执行对应的 action ，最后在 action 中，我们设置了匹配文本的 token class :keyword和string。最终效果如图：

这里有些人就会有疑问，token class 是 css class 吗？本质上，token class 其实就是设置 css 中的 class ，不过，keyword != .keyword ，Monarch 中会有一层 对应关系，keyword 对应着 css 中的 .mtk8，而 string 对应着 css 中的 .mtk5。Monarch 中内置了以下几种 token class：

identifier         entity           constructor
operators          tag              namespace
keyword            info-token       type
string             warn-token       predefined
string.escape      error-token      invalid
comment            debug-token
comment.doc        rege