如何为vscode编写语法高亮注入？

Question

我正在尝试为 pug 编写一个注入语法，以在某些 mixin 调用的内容中突出显示 JS 和 scss。

//- Example Pug file
+module.
  const myVar = {};

我希望这里的内容能够针对 JS 进行语法突出显示。

我基于 vscode 文档构建了一个语法，但它似乎并不适用。我确信我只是误解了注入语法应该如何工作的一些部分。

//tmLanguage.json
{
    "scopeName":"source.pug",
    "fileTypes": ["pug"],
    "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
    "injectionSelector": "L:source.pug -text.pug",
    "name": "k-scaffold",
    "patterns": [
        {"include": "#module"}
    ],
    "repository":{
        "module":{
            "comment": "Module Section",
            "begin":"^(\\s*)(\\+)(module)(\\.)",
            "beginCaptures":{
                "2":{"name":"storage.type.function.pug"},
                "3":{"name":"k-scaffold.function.pug"},
                "4":{"name":"storage.type.function.pug.dot-block-dot"}
            },
            "end": "^(?!(\\1\\s)|\\s*$)",
            "name": "meta.tag.other",
            "contentName": "meta.embedded.block.js",
            "patterns":[
                {
                    "include":"source.js"
                }
            ]
        }
    }
}

//package.json
{
  "name": "k-scaffold",
  "displayName": "k-scaffold",
  "description": "Syntax highlighting and code snippets for K-scaffold pug files.",
  "version": "0.0.1",
  "engines": {
    "vscode": "^1.82.0"
  },
  "categories": [
    "Programming Languages"
  ],
  "contributes": {
    "grammars": [{
      "injectTo": ["source.pug"],
      "scopeName": "K-scaffold-sfc.injection",
      "path": "./syntaxes/k-scaffold.tmLanguage.json"
    }]
  }
}

本质上，我只是想扩展

script

和

style

标签块格式从官方vscode pug语法荧光笔（第63 - 129行）。

Answer 1

我的注入语法显然有错误的 JSON 模式。本来应该是这样的：

{
  "scopeName": "k-scaffold.injection",
  "injectionSelector": "L:text.pug",
  "patterns": [
    {
      "include": "#module"
    },
    {
      "include": "#scss"
    }
  ],
  "repository": {
    "module": {
            "begin": "(\\s*)(\\+)(module)(\\.)",
      "beginCaptures": {
        "2": {
          "name": "storage.type.function.pug"
        },
        "3": {
          "name": "entity.name.function.pug"
        },
        "4": {
          "name": "storage.type.function.pug.dot-block-dot"
        }
      },
      "end": "(?=^\\1(?:$|[^\\s]))",
      "contentName": "kscaf.head",
      "patterns": [
        {
          "include": "source.js"
        }
      ]
    },
    "scss": {
            "begin": "(\\s*)(\\+)(scss)(?:(\\()('.+?')(\\)))?(\\.)",
      "beginCaptures": {
        "2": {
          "name": "storage.type.function.pug"
        },
        "3": {
          "name": "entity.name.function.pug"
        },
        "4": {
          "name": "args.mixin.pug"
        },
        "5": {
          "name": "string.quoted.single.js"
        },
        "6": {
          "name": "args.mixin.pug"
        },
        "7": {
          "name": "storage.type.function.pug.dot-block-dot"
        }
      },
      "end": "(?=^\\1(?:$|[^\\s]))",
      "name": "kscaf.injection",
      "patterns": [
        {
          "include": "source.css.scss"
        }
      ]
    }
  }
}