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).
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"
}
]
}
}
}