feat(vscode): enable syntax highlighting of cue code blocks in MDX

This enables syntax highlighting of code blocks inside MDX files annotated with the `vue` language.
vuejs · May 30, 2024 · 82131ae · 82131ae
1 parent b80b63a
commit 82131ae
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git a/extensions/vscode/package.json b/extensions/vscode/package.json
@@ -170,6 +170,42 @@
 					"source.graphql": "graphql"
 				}
 			},
+			{
+				"scopeName": "mdx.vue.codeblock",
+				"path": "./syntaxes/mdx-vue.json",
+				"injectTo": [
+					"source.mdx"
+				],
+				"embeddedLanguages": {
+					"mdx.embedded.vue": "vue",
+					"source.vue": "vue",
+					"text": "plaintext",
+					"text.html.derivative": "html",
+					"text.html.markdown": "markdown",
+					"text.pug": "jade",
+					"source.css": "css",
+					"source.css.scss": "scss",
+					"source.css.less": "less",
+					"source.sass": "sass",
+					"source.stylus": "stylus",
+					"source.postcss": "postcss",
+					"source.js": "javascript",
+					"source.ts": "typescript",
+					"source.js.jsx": "javascriptreact",
+					"source.tsx": "typescriptreact",
+					"source.coffee": "coffeescript",
+					"meta.tag.js": "jsx-tags",
+					"meta.tag.tsx": "jsx-tags",
+					"meta.tag.without-attributes.js": "jsx-tags",
+					"meta.tag.without-attributes.tsx": "jsx-tags",
+					"source.json": "json",
+					"source.json.comments": "jsonc",
+					"source.json5": "json5",
+					"source.yaml": "yaml",
+					"source.toml": "toml",
+					"source.graphql": "graphql"
+				}
+			},
 			{
 				"scopeName": "vue.directives",
 				"path": "./syntaxes/vue-directives.json",

diff --git a/extensions/vscode/syntaxes/mdx-vue.json b/extensions/vscode/syntaxes/mdx-vue.json
@@ -0,0 +1,64 @@
+{
+	"fileTypes": [ ],
+	"scopeName": "mdx.vue.codeblock",
+	"injectionSelector": "L:source.mdx",
+	"patterns": [
+		{
+			"include": "#vue-code-block"
+		}
+	],
+	"repository": {
+		"vue-code-block": {
+			"patterns": [
+				{
+					"begin": "(?:^|\\G)[\\t ]*(`{3,})(?:[\\t ]*((?i:(?:.*\\.)?vue))(?:[\\t ]+((?:[^\\n\\r`])+))?)(?:[\\t ]*$)",
+					"beginCaptures": {
+						"1": {
+							"name": "string.other.begin.code.fenced.mdx"
+						},
+						"2": {
+							"name": "entity.name.function.mdx"
+						}
+					},
+					"contentName": "meta.embedded.vue",
+					"end": "(\\1)(?:[\\t ]*$)",
+					"endCaptures": {
+						"1": {
+							"name": "string.other.end.code.fenced.mdx"
+						}
+					},
+					"name": "markup.code.vue.mdx",
+					"patterns": [
+						{
+							"include": "source.vue"
+						}
+					]
+				},
+				{
+					"begin": "(?:^|\\G)[\\t ]*(~{3,})(?:[\\t ]*((?i:(?:.*\\.)?vue))(?:[\\t ]+((?:[^\\n\\r])+))?)(?:[\\t ]*$)",
+					"beginCaptures": {
+						"1": {
+							"name": "string.other.begin.code.fenced.mdx"
+						},
+						"2": {
+							"name": "entity.name.function.mdx"
+						}
+					},
+					"contentName": "meta.embedded.vue",
+					"end": "(\\1)(?:[\\t ]*$)",
+					"endCaptures": {
+						"1": {
+							"name": "string.other.end.code.fenced.mdx"
+						}
+					},
+					"name": "markup.code.vue.mdx",
+					"patterns": [
+						{
+							"include": "source.vue"
+						}
+					]
+				}
+			]
+		}
+	}
+}