remark-prismjs: add aliases for languages

This allows specifying aliases for languages when using prismjs. Fixes #4549
gatsbyjs · Mar 24, 2018 · fe2ade1 · fe2ade1
1 parent 508774a
commit fe2ade1
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 4 deletions.
diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
@@ -34,6 +34,11 @@ plugins: [
             // A suggested value for English speakers is the non-ascii
             // character '›'.
             inlineCodeMarker: null,
+            // This lets you set up language aliases.  For example,
+            // setting this to '{ sh: "bash" }' will let you use
+            // the language "sh" which will highlight using the
+            // bash highlighter.
+            aliases: {},
           },
         },
       ],

diff --git a/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap b/packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/index.js.snap
@@ -44,6 +44,49 @@ Object {
 }
 `;
 
+exports[`remark prism plugin generates a <pre> tag with aliases applied 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "lang": "foobar",
+      "position": Position {
+        "end": Object {
+          "column": 4,
+          "line": 3,
+          "offset": 21,
+        },
+        "indent": Array [
+          1,
+          1,
+        ],
+        "start": Object {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "html",
+      "value": "<div class=\\"gatsby-highlight\\">
+      <pre class=\\"language-javascript\\"><code class=\\"language-javascript\\">// Fake</code></pre>
+      </div>",
+    },
+  ],
+  "position": Object {
+    "end": Object {
+      "column": 4,
+      "line": 3,
+      "offset": 21,
+    },
+    "start": Object {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`remark prism plugin generates a <pre> tag with class="language-*" prefix by default 1`] = `
 Object {
   "children": Array [
@@ -199,6 +242,62 @@ Object {
 }
 `;
 
+exports[`remark prism plugin generates an inline <code> tag with aliases applied 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "children": Array [
+        Object {
+          "position": Position {
+            "end": Object {
+              "column": 16,
+              "line": 1,
+              "offset": 15,
+            },
+            "indent": Array [],
+            "start": Object {
+              "column": 1,
+              "line": 1,
+              "offset": 0,
+            },
+          },
+          "type": "html",
+          "value": "<code class=\\"language-javascript\\">Fake
+</code>",
+        },
+      ],
+      "position": Position {
+        "end": Object {
+          "column": 16,
+          "line": 1,
+          "offset": 15,
+        },
+        "indent": Array [],
+        "start": Object {
+          "column": 1,
+          "line": 1,
+          "offset": 0,
+        },
+      },
+      "type": "paragraph",
+    },
+  ],
+  "position": Object {
+    "end": Object {
+      "column": 16,
+      "line": 1,
+      "offset": 15,
+    },
+    "start": Object {
+      "column": 1,
+      "line": 1,
+      "offset": 0,
+    },
+  },
+  "type": "root",
+}
+`;
+
 exports[`remark prism plugin generates an inline <code> tag with class="language-*" prefix by default 1`] = `
 Object {
   "children": Array [

diff --git a/packages/gatsby-remark-prismjs/src/__tests__/index.js b/packages/gatsby-remark-prismjs/src/__tests__/index.js
@@ -16,6 +16,13 @@ describe(`remark prism plugin`, () => {
       plugin({ markdownAST }, { classPrefix: `custom-` })
       expect(markdownAST).toMatchSnapshot()
     })
+
+    it(`with aliases applied`, () => {
+      const code = `\`\`\`foobar\n// Fake\n\`\`\``
+      const markdownAST = remark.parse(code)
+      plugin({ markdownAST }, { aliases: { foobar: `javascript` } })
+      expect(markdownAST).toMatchSnapshot()
+    })
   })
 
   describe(`generates an inline <code> tag`, () => {
@@ -39,5 +46,15 @@ describe(`remark prism plugin`, () => {
       plugin({ markdownAST }, { inlineCodeMarker: `🍺  ` })
       expect(markdownAST).toMatchSnapshot()
     })
+
+    it(`with aliases applied`, () => {
+      const code = `\`foobar : Fake\``
+      const markdownAST = remark.parse(code)
+      plugin(
+        { markdownAST },
+        { inlineCodeMarker: ` : `, aliases: { foobar: `javascript` } }
+      )
+      expect(markdownAST).toMatchSnapshot()
+    })
   })
 })
diff --git a/packages/gatsby-remark-prismjs/src/index.js b/packages/gatsby-remark-prismjs/src/index.js
@@ -5,8 +5,13 @@ const highlightCode = require(`./highlight-code`)
 
 module.exports = (
   { markdownAST },
-  { classPrefix = `language-`, inlineCodeMarker = null } = {}
+  { classPrefix = `language-`, inlineCodeMarker = null, aliases = {} } = {}
 ) => {
+  const normalizeLanguage = lang => {
+    const lower = lang.toLowerCase()
+    return aliases[lower] || lower
+  }
+
   visit(markdownAST, `code`, node => {
     let language = node.lang
     let { splitLanguage, highlightLines } = parseLineNumberRange(language)
@@ -20,8 +25,7 @@ module.exports = (
     // @see https://github.com/PrismJS/prism/blob/1d5047df37aacc900f8270b1c6215028f6988eb1/themes/prism.css#L49-L54
     let languageName = `text`
     if (language) {
-      language = language.toLowerCase()
-      languageName = language
+      languageName = normalizeLanguage(language)
     }
 
     // Allow users to specify a custom class prefix to avoid breaking
@@ -49,7 +53,7 @@ module.exports = (
     if (inlineCodeMarker) {
       let [language, restOfValue] = node.value.split(`${inlineCodeMarker}`, 2)
       if (language && restOfValue) {
-        languageName = language.toLowerCase()
+        languageName = normalizeLanguage(language)
         node.value = restOfValue
       }
     }