visual-studio-codepugvscode-extensionssyntax-highlightingtmlanguage

How to write an syntax highlight injection for vscode?


I am trying to write an injection grammar for pug to get JS and scss highlighting in the content of certain mixin calls.

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

I'd like the contents to be syntax highlighted for JS here.

I built a grammar based on the vscode documentation, but it doesn't appear to apply. I'm sure I'm just misunderstanding some piece of how the injection grammar is supposed to work.

//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"
    }]
  }
}

Essentially, I just want to extend the script and style tag block formatting from the official vscode pug syntax highlighter (Lines 63 - 129).


Solution

  • I apparently had the JSON schema wrong for the injection grammar. Here's what it should have been:

    {
      "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"
            }
          ]
        }
      }
    }