如何用Lezer Grammar编写Scribal模板语法高亮解析器？

以下是针对你的需求编写的完整scribal.grammar文件，以及配套的高亮配置说明：

核心语法定义（scribal.grammar） #

@top Scribal { (text | Interpolation)* }

// 匹配普通模板文本，遇到{{时停止
text { (!"{{" .)+ }

// 匹配{{}}包裹的插值块
Interpolation { "{{" InterpolationContent "}}" }

// 支持插值块内嵌套{{}}，递归匹配内容
InterpolationContent { (text | Interpolation)* }

// 显式定义分隔符标记，避免Lezer自动拆分
@tokens {
  "{{" { /\{\{/ }
  "}}" { /\}\}/ }
}

// 让Lezer正确识别分隔符边界
@detectDelim

// 将插值内容标记为Code类型，用于后续高亮
@highlight InterpolationContent as "Code"

规则说明 #

• @top Scribal：定义整个文档的顶级规则，由普通文本和插值块交替组成
• text：匹配所有不以{{开头的字符，确保普通文本不会被误拆分为插值内容
• Interpolation：精准匹配{{开头、}}结尾的插值结构
• InterpolationContent：递归支持嵌套的{{}}结构，满足你对嵌套内容高亮的需求
• @detectDelim：确保Lezer将{{和}}识别为完整的分隔符，而非单个大括号

高亮配置（配套JS文件） #

生成解析器后，需要在语言配置中绑定高亮样式，示例代码如下：

import { parser } from "./parser.js";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags } from "@lezer/highlight";

// 自定义高亮样式，可根据需求调整颜色
const scribalHighlightStyle = HighlightStyle.define([
  { tag: tags.code, color: "#d73a49" }
]);

export const scribalLanguage = {
  parser: parser.configure({
    props: [syntaxHighlighting(scribalHighlightStyle)]
  })
};

验证步骤 #

1. 安装依赖：确保已安装lezer-generator、@lezer/highlight、@codemirror/language等包
2. 生成解析器：在package.json中添加脚本"build": "lezer-generator src/scribal.grammar -o src/parser.js"，运行npm run build生成解析器文件
3. 集成到编辑器：将scribalLanguage引入CodeMirror实例，即可看到{{}}内的内容（包括嵌套结构）被统一高亮

如果后续需要扩展{{}}内的语法支持（比如变量、表达式高亮），只需细化InterpolationContent的规则，为不同语法节点添加对应的高亮标记即可。

内容的提问来源于stack exchange，提问作者Alexander