Fix code fence option parsing with space after language name

Author: andrewbranch

src/index.js

@@ -73,7 +73,7 @@ function createPlugin() {
       /** @type {string} */
       const text = node.value || (node.children && node.children[0] && node.children[0].value);
       if (!text) continue;
-      const { languageName, options } = parseCodeFenceHeader(node.lang ? node.lang.toLowerCase() : '');
+      const { languageName, options } = parseCodeFenceHeader(node.lang ? node.lang.toLowerCase() : '', node.meta);
       await downloadExtensionsIfNeeded({
         extensions,
         cache,

src/parseCodeFenceHeader.js

@@ -14,12 +14,14 @@ function test(input, pattern) {
 }
 
 /**
- * @param {string} input
+ * @param {string} lang
+ * @param {string | undefined} meta
  */
-function parseCodeFenceHeader(input) {
+function parseCodeFenceHeader(lang, meta) {
   let pos = 0;
   let options = {};
   let languageName = '';
+  const input = lang + (meta || '');
   skipTrivia();
   if (!isEnd() && current() !== '{') {
     languageName = parseIdentifier();

test/integration/cases/code-fence-meta.expected.html

@@ -0,0 +1,74 @@
+<pre class="default-dark vscode-highlight" data-language="js"><code class="vscode-highlight-code"><span class="vscode-highlight-line vscode-highlight-line-highlighted"><span class="mtk3">// should be highlighted</span></span></code></pre>
+<style class="vscode-highlight-styles">
+  :root {
+  --vscode-highlight-padding-v: 1rem;
+  --vscode-highlight-padding-h: 1.5rem;
+  --vscode-highlight-padding-top: var(--vscode-highlight-padding-v);
+  --vscode-highlight-padding-right: var(--vscode-highlight-padding-h);
+  --vscode-highlight-padding-bottom: var(--vscode-highlight-padding-v);
+  --vscode-highlight-padding-left: var(--vscode-highlight-padding-h);
+  --vscode-highlight-border-radius: 8px;
+
+  --vscode-highlight-line-highlighted-background-color: transparent;
+  --vscode-highlight-line-highlighted-border-width: 4px;
+  --vscode-highlight-line-highlighted-border-color: transparent;
+}
+
+.vscode-highlight {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-top: 1rem;
+  padding-top: var(--vscode-highlight-padding-top);
+  padding-bottom: 1rem;
+  padding-bottom: var(--vscode-highlight-padding-bottom);
+  border-radius: 8px;
+  border-radius: var(--vscode-highlight-border-radius);
+  font-feature-settings: normal;
+}
+
+.vscode-highlight-code {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.vscode-highlight-line {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-left: 1.5rem;
+  padding-left: var(--vscode-highlight-padding-left);
+  padding-right: 1.5rem;
+  padding-right: var(--vscode-highlight-padding-right);
+}
+
+.vscode-highlight-line-highlighted {
+  background-color: var(--vscode-highlight-line-highlighted-background-color);
+  box-shadow: inset var(--vscode-highlight-line-highlighted-border-width) 0 0 0 var(--vscode-highlight-line-highlighted-border-color);
+}
+
+  .default-dark {
+background-color: #1E1E1E;
+color: #D4D4D4;
+}
+
+.default-dark .mtk1 { color: #D4D4D4; }
+.default-dark .mtk2 { color: #1E1E1E; }
+.default-dark .mtk3 { color: #6A9955; }
+.default-dark .mtk4 { color: #569CD6; }
+.default-dark .mtk5 { color: #D16969; }
+.default-dark .mtk6 { color: #D7BA7D; }
+.default-dark .mtk7 { color: #B5CEA8; }
+.default-dark .mtk8 { color: #CE9178; }
+.default-dark .mtk9 { color: #646695; }
+.default-dark .mtk10 { color: #4EC9B0; }
+.default-dark .mtk11 { color: #DCDCAA; }
+.default-dark .mtk12 { color: #9CDCFE; }
+.default-dark .mtk13 { color: #000080; }
+.default-dark .mtk14 { color: #F44747; }
+.default-dark .mtk15 { color: #C586C0; }
+.default-dark .mtk16 { color: #6796E6; }
+.default-dark .mtk17 { color: #808080; }
+.default-dark .mtki { font-style: italic; }
+.default-dark .mtkb { font-weight: bold; }
+.default-dark .mtku { text-decoration: underline; text-underline-position: under; }
+</style>

test/integration/cases/code-fence-meta.md

@@ -0,0 +1,3 @@
+```js {1}
+// should be highlighted
+```