how to create Syntax Highlight for your DSL in visual studio code

本文介绍如何在Visual Studio Code中扩展语法高亮，通过修改配置文件实现对特定关键字的高亮显示，适用于基于Python的DSL语言。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

visual studio code的语法高亮分为两部分：一部分是使用textmate的语法规则把自己的DSL分割成不同的Tokens，如果我们给Token起的名字是符合它的一套规范的话，vs code会根据当前的Theme来渲染我们的DSL。

也就是说，如果一般我们只需要完成第一步，就可以让vs code，来渲染我们的语法高亮了。
更进一步的是，vs code还允许我们给已经有的语言语法高亮做扩展，这样我们需要做的东西就更少了。
下面我以我们的DSL为例子，来进行说明。
我们的语言是以Python为base的，所以我只需要给我们的语言中的keyword加上语法高亮就可以了。

Install Node.js and Git, then install Yeoman and VS Code Extension Generator
Install vs code
yo code to create a new language scaffold. and change some inputs to adapt your DSL
下面是我的package.json文件，关键是injectTo熟悉。

{
    "name": "Dummy",
    "displayName": "Dummy_highlight",
    "description": "Dummy program highlight",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.40.0"
    },
    "categories": [
        "Programming Languages"
    ],
    "contributes": {
        "grammars": [
            {
                "injectTo": [
                    "source.python"
                ],
                "scopeName": "source.Dummy",
                "path": "./syntaxes/Dummy.tmLanguage.json"
            }
        ]
    }
}

修改syntaxes目录下的Dummy.tmLanguage.json文件，加入我们的keyword就可以了

{
  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "name": "Dummy",
  "scopeName": "source.Dummy",
  "injectionSelector": "L:source.python",
  "patterns": [
    {
      "include": "#keywords"
    }
    
  ],
  "repository": {
    "keywords": {
      "patterns": [
        {
          "name": "keyword.control.common",
          "match": "\\b(Version|include|Import|default)\\b"
        },
        {
          "name": "keyword.other.common2",
          "match": "\\b(for|if|while)\\b"
        }
      ]
    }
    
  }
  
}

如何debug
用vs code打开上面的目录，转到Debug视图，点击下面这个三角，启动debug就可以了；
如果我们当中改动了上面的两个配置文件，只有在debug启动的vs code中，使用Ctrl+R，来使我们的改动生效，就可以了。
完成后的效果如下，Version，include和Import被高亮了。