Merge pull request #1485 from logaretm/feat/inject-markdown-fenced-code

feat: added fenced code support for markdown files

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Upgrade to TypeScript 3.7 with Optional Chaining and Nullish Coalescing. #1510.
 - 🙌 Fix syntax highlighting for interpolation in attributes with numbers (such as `x1`). Thanks to contribution from [Niklas Higi](https://github.com/shroudedcode). #1465.
+- 🙌 Fix syntax highlighting for backticked vue code block in Markdown file. Thanks to contribution from [Abdelrahman Awad](https://github.com/logaretm). #1024 and #1485.
 
 ### 0.22.6 | 2019-10-23 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.22.6/vspackage)
 

package.json

@@ -166,6 +166,16 @@
         "injectTo": [
           "source.vue"
         ]
+      },
+      {
+        "scopeName": "markdown.vue.codeblock",
+        "path": "./syntaxes/markdown-vue.json",
+        "injectTo": [
+          "text.html.markdown"
+        ],
+        "embeddedLanguages": {
+          "meta.embedded.block.vue": "vue"
+        }
       }
     ],
     "configuration": {

syntaxes/markdown-vue.json

@@ -0,0 +1,45 @@
+{
+  "scopeName": "markdown.vue.codeblock",
+  "fileTypes": [],
+  "injectionSelector": "L:text.html.markdown",
+  "patterns": [
+    {
+      "include": "#vue-code-block"
+    }
+  ],
+  "repository": {
+    "vue-code-block": {
+      "begin": "(^|\\G)(\\s*)(\\`{3,}|~{3,})\\s*(?i:(vue)(\\s+[^`~]*)?$)",
+      "name": "markup.fenced_code.block.markdown",
+      "end": "(^|\\G)(\\2|\\s{0,3})(\\3)\\s*$",
+      "beginCaptures": {
+        "3": {
+          "name": "punctuation.definition.markdown"
+        },
+        "5": {
+          "name": "fenced_code.block.language"
+        },
+        "6": {
+          "name": "fenced_code.block.language.attributes"
+        }
+      },
+      "endCaptures": {
+        "3": {
+          "name": "punctuation.definition.markdown"
+        }
+      },
+      "patterns": [
+        {
+          "begin": "(^|\\G)(\\s*)(.*)",
+          "while": "(^|\\G)(?!\\s*([`~]{3,})\\s*$)",
+          "contentName": "meta.embedded.block.vue",
+          "patterns": [
+            {
+              "include": "source.vue"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

test/grammar/fixture/embedded.md

@@ -0,0 +1,10 @@
+```vue
+<template>
+  <div></div>
+</template>
+<style>
+.foo {
+  color: blue;
+}
+</style>
+```