(fix) Handle syntax highlighting for most markdown files (#1537)

Mostly fixes_ #1094. Do this by injecting rules to parse typescript and css for svelte script/style blocks inside markdown only. This should cover *most* cases of embedded svelte blocks inside markdown. It would not be *too* difficult to extend this further to handle other types of embedded script/style tags (as is done in the original grammar), though it would be somewhat tedious.
sveltejs · Jun 26, 2022 · 35bbfc5 · 35bbfc5
1 parent c2466bf
commit 35bbfc5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/packages/svelte-vscode/package.json b/packages/svelte-vscode/package.json
@@ -474,6 +474,20 @@
                     "meta.embedded.block.svelte": "svelte"
                 }
             },
+            {
+                "scopeName": "markdown.svelte.codeblock.script",
+                "path": "./syntaxes/markdown-svelte-js.json",
+                "injectTo": [
+                    "text.html.markdown"
+                ]
+            },
+            {
+                "scopeName": "markdown.svelte.codeblock.style",
+                "path": "./syntaxes/markdown-svelte-css.json",
+                "injectTo": [
+                    "text.html.markdown"
+                ]
+            },
             {
                 "scopeName": "source.css.postcss",
                 "path": "./syntaxes/postcss.json",

diff --git a/packages/svelte-vscode/syntaxes/markdown-svelte-css.json b/packages/svelte-vscode/syntaxes/markdown-svelte-css.json
@@ -0,0 +1,23 @@
+{
+    "scopeName": "markdown.svelte.codeblock.style",
+    "fileTypes": [],
+    "injectionSelector": "L:meta.style.svelte",
+    "patterns": [
+        {
+            "include": "#svelte-script-css"
+        }
+    ],
+    "repository": {
+        "svelte-script-css": {
+            "begin": "(?<=style.*>)(?!</)",
+            "end": "(?=</)",
+            "name": "meta.embedded.block.svelte.style",
+            "contentName": "source.css",
+            "patterns": [
+                {
+                    "include": "source.css"
+                }
+            ]
+        }
+    }
+}
diff --git a/packages/svelte-vscode/syntaxes/markdown-svelte-js.json b/packages/svelte-vscode/syntaxes/markdown-svelte-js.json
@@ -0,0 +1,23 @@
+{
+    "scopeName": "markdown.svelte.codeblock.script",
+    "fileTypes": [],
+    "injectionSelector": "L:meta.script.svelte",
+    "patterns": [
+        {
+            "include": "#svelte-script-js"
+        }
+    ],
+    "repository": {
+        "svelte-script-js": {
+            "begin": "(?<=script.*>)(?!</)",
+            "end": "(?=</)",
+            "name": "meta.embedded.block.svelte.script",
+            "contentName": "source.ts",
+            "patterns": [
+                {
+                    "include": "source.ts"
+                }
+            ]
+        }
+    }
+}