Allow # and + in language names

Author: andrewbranch

src/parseCodeFenceHeader.js

@@ -1,5 +1,5 @@
 // @ts-check
-const identifierPattern = /[a-z0-9-–—_]/i;
+const identifierPattern = /[a-z0-9-–—_+#]/i;
 const triviaPattern = /\s/;
 const startOfNumberPattern = /[0-9-.]/;
 const numberPattern = /[0-9-.e]/;
@@ -24,11 +24,19 @@ function parseCodeFenceHeader(input) {
   if (!isEnd() && current() !== '{') {
     languageName = parseIdentifier();
   }
+  const languageNameEnd = pos;
   skipTrivia();
   if (!isEnd() && current() === '{') {
     options = parseObject();
   }
 
+  if (!isEnd()) {
+    if (languageNameEnd === pos) {
+      return fail(`Invalid character in language name: '${current()}'`);
+    }
+    return fail(`Unrecognized input: '${current()}'`);
+  }
+
   return { languageName, options };
 
   function current() {

test/__snapshots__/gatsby-remark-vscode.test.js.snap

@@ -247,6 +247,56 @@ color: #D4D4D4;
 }
 `;
 
+exports[`included languages and themes includes special characters in language name 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [],
+      "type": "paragraph",
+    },
+    Object {
+      "lang": "c++",
+      "type": "html",
+      "value": "<pre class=\\"default-dark vscode-highlight\\" data-language=\\"c++\\"><code class=\\"vscode-highlight-code\\"><span class=\\"vscode-highlight-line\\"><span class=\\"mtk4\\">const</span><span class=\\"mtk1\\"> x = </span><span class=\\"mtk7\\">3</span><span class=\\"mtk1\\">;</span></span>
+<span class=\\"vscode-highlight-line\\"><span class=\\"mtk3\\">// Comment</span></span></code></pre>",
+    },
+    Object {
+      "children": Array [],
+      "type": "paragraph",
+    },
+    Object {
+      "type": "html",
+      "value": "<style class=\\"vscode-highlight-styles\\">.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>",
+    },
+  ],
+  "type": "root",
+}
+`;
+
 exports[`included languages and themes partially works if an embedded grammar is missing 1`] = `
 Object {
   "children": Array [

test/gatsby-remark-vscode.test.js

@@ -117,6 +117,10 @@ describe('included languages and themes', () => {
   it('can use a custom language alias', async () => {
     return testSnapshot({ languageAliases: { 'java-scripty': 'js' } }, createMarkdownAST('java-scripty'));
   });
+
+  it('includes special characters in language name', async () => {
+    return testSnapshot({}, createMarkdownAST('c++'));
+  });
 });
 
 describe('extension downloading', () => {

test/parseCodeFenceHeader.test.js

@@ -4,6 +4,7 @@ const parse = require('../src/parseCodeFenceHeader');
 describe('parseCodeFenceHeader', () => {
   it('parses language name without options', () => {
     expect(parse('jsx')).toEqual({ languageName: 'jsx', options: {} });
+    expect(parse('c++')).toEqual({ languageName: 'c++', options: {} });
   });
 
   it('parses empty options', () => {
@@ -52,5 +53,7 @@ describe('parseCodeFenceHeader', () => {
     expect(() => parse('jsx{ a: boo }')).toThrowError(/unrecognized input 'boo'/i);
     expect(() => parse('jsx{ : }')).toThrowError(/expected identifier/i);
     expect(() => parse('jsx{ a: "')).toThrowError(/unexpected end of input/i);
+    expect(() => parse('c%')).toThrowError(/invalid character in language name.+?%/i);
+    expect(() => parse('c %')).toThrowError(/unrecognized input.+?%/i);
   });
 });