Skip to content

Commit a6ba62d

Browse files
MonkatrazMonkatraz
authored
vscode: improved Svelte-Pug syntax highlighting (#645)
Adds improved syntax highlighting when using Pug with Svelte. Uses injected grammars - this way the original Pug grammar is kept as it is, and does not have to be cloned. #295, #106
1 parent 4409c1b commit a6ba62d

File tree

4 files changed

+581
-0
lines changed

4 files changed

+581
-0
lines changed

‎packages/svelte-vscode/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,38 @@
298298
"source.ts": "typescript"
299299
}
300300
},
301+
{
302+
"scopeName": "svelte.pug",
303+
"path": "./syntaxes/pug-svelte.json",
304+
"injectTo": [
305+
"source.svelte"
306+
],
307+
"embeddedLanguages": {
308+
"source.ts": "typescript",
309+
"text.pug": "jade"
310+
}
311+
},
312+
{
313+
"scopeName": "svelte.pug.tags",
314+
"path": "./syntaxes/pug-svelte-tags.json",
315+
"injectTo": [
316+
"source.svelte"
317+
],
318+
"embeddedLanguages": {
319+
"source.ts": "typescript",
320+
"text.pug": "jade"
321+
}
322+
},
323+
{
324+
"scopeName": "svelte.pug.dotblock",
325+
"path": "./syntaxes/pug-svelte-dotblock.json",
326+
"injectTo": [
327+
"source.svelte"
328+
],
329+
"embeddedLanguages": {
330+
"source.ts": "typescript"
331+
}
332+
},
301333
{
302334
"scopeName": "markdown.svelte.codeblock",
303335
"path": "./syntaxes/markdown-svelte.json",

‎packages/svelte-vscode/syntaxes/pug-svelte-dotblock.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"scopeName": "svelte.pug.dotblock",
3+
"fileTypes": [],
4+
"injectionSelector": "L:text.block.pug -meta.embedded.ts",
5+
"patterns": [
6+
{
7+
"include": "#interp-object-literal"
8+
},
9+
{
10+
"include": "#interp"
11+
}
12+
],
13+
"repository": {
14+
"interp-object-literal": {
15+
"contentName": "meta.interpolation meta.embedded.ts",
16+
"begin": "(?![!$#]){\\s*?(?={)",
17+
"beginCaptures": {
18+
"0": {
19+
"name": "punctuation.section.interpolation.begin"
20+
}
21+
},
22+
"end": "(?<=})\\s*?}",
23+
"endCaptures": {
24+
"0": {
25+
"name": "punctuation.section.interpolation.end"
26+
}
27+
},
28+
"patterns": [
29+
{
30+
"include": "source.ts#object-literal"
31+
}
32+
]
33+
},
34+
"interp": {
35+
"contentName": "meta.interpolation meta.embedded.ts",
36+
"begin": "(?![!$#]){",
37+
"beginCaptures": {
38+
"0": {
39+
"name": "punctuation.section.interpolation.begin"
40+
}
41+
},
42+
"end": "}",
43+
"endCaptures": {
44+
"0": {
45+
"name": "punctuation.section.interpolation.end"
46+
}
47+
},
48+
"patterns": [
49+
{
50+
"include": "source.ts"
51+
}
52+
]
53+
}
54+
}
55+
}

‎packages/svelte-vscode/syntaxes/pug-svelte-tags.json‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
{
2+
"scopeName": "svelte.pug.tags",
3+
"fileTypes": [],
4+
"injectionSelector": "L:text.pug meta.tag.other -meta.embedded.ts",
5+
"patterns": [
6+
{
7+
"include": "#interp-object-literal"
8+
},
9+
{
10+
"include": "#interp"
11+
},
12+
{
13+
"include": "#attr-function"
14+
},
15+
{
16+
"include": "#attr-interp"
17+
},
18+
{
19+
"include": "#attr-interp-invalid-quotes"
20+
},
21+
{
22+
"include": "#attr-interp-invalid-noquotes"
23+
},
24+
{
25+
"include": "#attr-event"
26+
},
27+
{
28+
"include": "#attr-variable"
29+
}
30+
],
31+
"repository": {
32+
"interp-object-literal": {
33+
"contentName": "meta.interpolation meta.embedded.ts",
34+
"begin": "(?![!$#]){\\s*?(?={)",
35+
"beginCaptures": {
36+
"0": {
37+
"name": "punctuation.section.interpolation.begin"
38+
}
39+
},
40+
"end": "(?<=})\\s*?}",
41+
"endCaptures": {
42+
"0": {
43+
"name": "punctuation.section.interpolation.end"
44+
}
45+
},
46+
"patterns": [
47+
{
48+
"include": "source.ts#object-literal"
49+
}
50+
]
51+
},
52+
"interp": {
53+
"contentName": "meta.interpolation meta.embedded.ts",
54+
"begin": "(?![!$#]){",
55+
"beginCaptures": {
56+
"0": {
57+
"name": "punctuation.section.interpolation.begin"
58+
}
59+
},
60+
"end": "}",
61+
"endCaptures": {
62+
"0": {
63+
"name": "punctuation.section.interpolation.end"
64+
}
65+
},
66+
"patterns": [
67+
{
68+
"include": "source.ts"
69+
}
70+
]
71+
},
72+
"attr-interp": {
73+
"match": "\\b(?<=[\\w$\\-_]*)\\s*?(!=|=)\\s*?([`'\"])((?![$!#]){.*})(\\k<2>)",
74+
"captures": {
75+
"1": {
76+
"patterns": [
77+
{
78+
"match": "=",
79+
"name": "invalid.illegal"
80+
},
81+
{
82+
"match": "!=",
83+
"name": "keyword.operator.assignment"
84+
}
85+
]
86+
},
87+
"2": {
88+
"name": "punctuation.section.interpolation.begin"
89+
},
90+
"3": {
91+
"patterns": [
92+
{
93+
"include": "#interp"
94+
}
95+
]
96+
},
97+
"4": {
98+
"name": "punctuation.section.interpolation.begin"
99+
}
100+
}
101+
},
102+
"attr-interp-invalid-quotes": {
103+
"match": "\\b(?<=[\\w$\\-_]*)\\s*?(!=|=)\\s*?([`'\"])((?![$!#]){.*})(?!\\k<2>)",
104+
"captures": {
105+
"1": {
106+
"patterns": [
107+
{
108+
"match": "=",
109+
"name": "invalid.illegal"
110+
},
111+
{
112+
"match": "!=",
113+
"name": "keyword.operator.assignment"
114+
}
115+
]
116+
},
117+
"2": {
118+
"name": "punctuation.section.interpolation.begin"
119+
},
120+
"3": {
121+
"name": "invalid.illegal"
122+
},
123+
"4": {
124+
"name": "invalid.illegal"
125+
}
126+
}
127+
},
128+
"attr-interp-invalid-noquotes": {
129+
"match": "\\b(?<=[\\w$\\-_]*)\\s*?(!=|=)\\s*?(?![`'\"])((?![$!#]){.*})(?![`'\"])",
130+
"captures": {
131+
"1": {
132+
"patterns": [
133+
{
134+
"match": "=",
135+
"name": "invalid.illegal"
136+
},
137+
{
138+
"match": "!=",
139+
"name": "keyword.operator.assignment"
140+
}
141+
]
142+
},
143+
"2": {
144+
"name": "invalid.illegal"
145+
},
146+
"3": {
147+
"patterns": [
148+
{
149+
"include": "#interp"
150+
}
151+
]
152+
},
153+
"4": {
154+
"name": "invalid.illegal"
155+
}
156+
}
157+
},
158+
"attr-function": {
159+
"match": "\\b(use|transition|in|out|animate)(:)(\\w+)",
160+
"captures": {
161+
"1": {
162+
"name": "entity.other.attribute-name"
163+
},
164+
"2": {
165+
"name": "keyword.operator.assignment"
166+
},
167+
"3": {
168+
"name": "variable.function"
169+
}
170+
}
171+
},
172+
"attr-event": {
173+
"match": "\\b(on)(:)(\\w+)",
174+
"captures": {
175+
"1": {
176+
"name": "entity.other.attribute-name"
177+
},
178+
"2": {
179+
"name": "keyword.operator.assignment"
180+
},
181+
"3": {
182+
"name": "entity.name.type"
183+
}
184+
}
185+
},
186+
"attr-variable": {
187+
"match": "\\b(bind|class|let)(:)(\\w+)",
188+
"captures": {
189+
"1": {
190+
"name": "entity.other.attribute-name"
191+
},
192+
"2": {
193+
"name": "keyword.operator.assignment"
194+
},
195+
"3": {
196+
"name": "variable.parameter"
197+
}
198+
}
199+
}
200+
}
201+
}

0 commit comments

Comments
 (0)