Attempt to highlight astro code blocks as HTML

The goal is to try and make code blocks tagged as astro as HTML.

````mdx
Below should be highlighted as HTML

```astro
<div></div>
```
````

This is intended to be a proof of concept for injecting custom languages
into MDX code blocks, not to support all sorts of languages in the MDX
extension by default.

fixtures/demo/fixture.mdx

@@ -6,6 +6,10 @@
 can use the full power of a framework like [React](https://reactjs.org) while
 you focus on content. 🤯
 
+```astro
+<div class="some class"></div>
+```
+
 ### Markdown
 
 Because MDX is based on markdown, you can leverage the full power of markdown, such as

packages/vscode-mdx/package.json

@@ -188,6 +188,9 @@
           "dark": "./assets/file-icon.svg",
           "light": "./assets/file-icon.svg"
         }
+      },
+      {
+        "id": "html-mdx-injection"
       }
     ],
     "jsonValidation": [
@@ -305,6 +308,17 @@
         "embeddedLanguages": {
           "meta.embedded.block.mdx": "mdx"
         }
+      },
+      {
+        "language": "html-mdx-injection",
+        "scopeName": "mdx.html.codeblock",
+        "path": "./syntaxes/html-mdx-injection.json",
+        "injectTo": [
+          "source.mdx"
+        ],
+        "embeddedLanguages": {
+          "meta.embedded.block.html": "html"
+        }
       }
     ],
     "typescriptServerPlugins": [

packages/vscode-mdx/syntaxes/html-mdx-injection.json

@@ -0,0 +1,42 @@
+{
+  "fileTypes": [],
+  "injectionSelector": "L:source.mdx",
+  "patterns": [
+    {
+      "include": "#html-code-block"
+    }
+  ],
+  "repository": {
+    "html-code-block": {
+      "begin": "(^|\\G)(\\s*)(\\`{3,}|~{3,})\\s*(?i:(astro)",
+      "name": "markup.code.other.mdx",
+      "end": "(^|\\G)(\\2|\\s{0,3})(\\3)\\s*$",
+      "beginCaptures": {
+        "3": {
+          "name": "string.other.begin.code.fenced.mdx"
+        },
+        "4": {
+          "name": "entity.name.function.mdx"
+        }
+      },
+      "endCaptures": {
+        "3": {
+          "name": "string.other.end.code.fenced.mdx"
+        }
+      },
+      "patterns": [
+        {
+          "begin": "(^|\\G)(\\s*)(.*)",
+          "while": "(^|\\G)(?!\\s*([`~]{3,})\\s*$)",
+          "contentName": "meta.embedded.block.html",
+          "patterns": [
+            {
+              "include": "source.html"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "scopeName": "mdx.html.codeblock"
+}