add feature to provide additional html escape sequences

address test failures
gatsbyjs · Dec 16, 2019 · d3e4ba6 · d3e4ba6
1 parent 2b2adcd
commit d3e4ba6
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 8 deletions.
diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
@@ -75,6 +75,10 @@ plugins: [
               host: "localhost",
               global: false,
             },
+            // By default the HTML entities <>&'" are escaped.
+            // Add additional HTML escapes by providing a mapping
+            // of HTML entities and their escape value IE: { '}': '&#123;' }
+            escapeEntities: {},
           },
         },
       ],

diff --git a/packages/gatsby-remark-prismjs/src/__tests__/escape-html.js b/packages/gatsby-remark-prismjs/src/__tests__/escape-html.js
@@ -0,0 +1,16 @@
+const escapeHtml = require(`../escape-html`)
+
+describe(`escaping html entities`, () => {
+  it(`returns code unchanged when no escapes are provided`, () => {
+    const code = `hello world&`
+    expect(escapeHtml(code)).toBe(code)
+  })
+
+  it(`escapes html`, () => {
+    const code = `&hello world&`
+    const mapping = {
+      "&": `&amp;`,
+    }
+    expect(escapeHtml(code, mapping)).toBe(`&amp;hello world&amp;`)
+  })
+})
diff --git a/packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js b/packages/gatsby-remark-prismjs/src/__tests__/highlight-code.js
@@ -13,7 +13,7 @@ int sum(a, b) {
 }
 `
     expect(
-      highlightCode(language, code, lineNumbersHighlight)
+      highlightCode(language, code, {}, lineNumbersHighlight)
     ).toMatchSnapshot()
   })
 
@@ -48,7 +48,7 @@ class Counter extends React.Component {
 
 export default Counter
 `
-    const processed = highlightCode(language, code, lineNumbersHighlight)
+    const processed = highlightCode(language, code, {}, lineNumbersHighlight)
 
     expect(processed).toMatchSnapshot()
     // expect spans to not contain \n as it would break line highlighting
@@ -62,7 +62,7 @@ export default Counter
       const highlightCode = require(`../highlight-code`)
       const language = `text`
       const code = `<button />`
-      expect(highlightCode(language, code, [], true)).toMatch(
+      expect(highlightCode(language, code, {}, [], true)).toMatch(
         `&lt;button /&gt;`
       )
       expect(console.warn).toHaveBeenCalledWith(
@@ -141,15 +141,17 @@ export default Counter
       const language = `javascript`
       const linesToHighlight = [1]
       const code = `const a = 1\nconst b = 2`
-      expect(highlightCode(language, code, linesToHighlight)).not.toMatch(/\n$/)
+      expect(highlightCode(language, code, {}, linesToHighlight)).not.toMatch(
+        /\n$/
+      )
     })
 
     it(`a trailing newline is preserved`, () => {
       const highlightCode = require(`../highlight-code`)
       const language = `javascript`
       const linesToHighlight = [1]
       const code = `const a = 1\nconst b = 2\n`
-      expect(highlightCode(language, code, linesToHighlight)).toMatch(
+      expect(highlightCode(language, code, {}, linesToHighlight)).toMatch(
         /[^\n]\n$/
       )
     })

diff --git a/packages/gatsby-remark-prismjs/src/escape-html.js b/packages/gatsby-remark-prismjs/src/escape-html.js
@@ -0,0 +1,15 @@
+const isEmpty = require(`lodash/isEmpty`)
+
+module.exports = (code, additionalEscapeCharacters = {}) => {
+  if (isEmpty(additionalEscapeCharacters)) return code
+  const escapedChars = char => additionalEscapeCharacters[char]
+  const chars = Object.keys(additionalEscapeCharacters)
+
+  const charsRe = new RegExp(`[${chars.join()}]`, `g`)
+
+  const rehasUnescapedChars = new RegExp(charsRe.source)
+
+  return code && rehasUnescapedChars.test(code)
+    ? code.replace(charsRe, escapedChars)
+    : code
+}
diff --git a/packages/gatsby-remark-prismjs/src/highlight-code.js b/packages/gatsby-remark-prismjs/src/highlight-code.js
@@ -2,11 +2,13 @@ const Prism = require(`prismjs`)
 const _ = require(`lodash`)
 const loadPrismLanguage = require(`./load-prism-language`)
 const handleDirectives = require(`./directives`)
+const escapeHTML = require(`./escape-html`)
 const unsupportedLanguages = new Set()
 
 module.exports = (
   language,
   code,
+  additionalEscapeCharacters = {},
   lineNumbersHighlight = [],
   noInlineHighlight = false
 ) => {
@@ -34,7 +36,7 @@ module.exports = (
         console.warn(message, `applying generic code block`)
         unsupportedLanguages.add(lang)
       }
-      return _.escape(code)
+      return escapeHTML(_.escape(code), additionalEscapeCharacters)
     }
   }
 

diff --git a/packages/gatsby-remark-prismjs/src/index.js b/packages/gatsby-remark-prismjs/src/index.js
@@ -20,6 +20,7 @@ module.exports = (
       host: `localhost`,
       global: false,
     },
+    escapeEntities = {},
   } = {}
 ) => {
   const normalizeLanguage = lang => {
@@ -94,7 +95,7 @@ module.exports = (
     +   `<pre${numLinesStyle} class="${className}${numLinesClass}">`
     +     `<code class="${className}">`
     +       `${useCommandLine ? commandLine(node.value, outputLines, promptUser, promptHost) : ``}`
-    +       `${highlightCode(languageName, node.value, highlightLines, noInlineHighlight)}`
+    +       `${highlightCode(languageName, node.value, escapeEntities, highlightLines, noInlineHighlight)}`
     +     `</code>`
     +     `${numLinesNumber}`
     +   `</pre>`
@@ -118,7 +119,8 @@ module.exports = (
       node.type = `html`
       node.value = `<code class="${className}">${highlightCode(
         languageName,
-        node.value
+        node.value,
+        escapeEntities
       )}</code>`
     })
   }