feat(gatsby-remark-prism-js): add additional html escapes (#20156)

* add feature to provide additional html escape sequences

address test failures

* modify escapehtml routine to combine the functionality of lodash.escape

* add test for base html escapes being used with additional escapes

Co-authored-by: GatsbyJS Bot <[email protected]>

Author: patricksimonian

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: {},
           },
         },
       ],

packages/gatsby-remark-prismjs/src/__tests__/escape-html.js

@@ -0,0 +1,26 @@
+const escapeHtml = require(`../escape-html`)
+
+describe(`escaping html entities`, () => {
+  it(`escapes base html when no additional escapes are passed in`, () => {
+    const code = `hello world&><"'`
+    expect(escapeHtml(code)).toBe(`hello world&amp;&gt;&lt;&quot;&#39;`)
+  })
+
+  it(`escapes additional html entities when passed in`, () => {
+    const code = `hello world{`
+    const mapping = {
+      "{": `&#123;`,
+    }
+    expect(escapeHtml(code, mapping)).toBe(`hello world&#123;`)
+  })
+
+  it(`escapes base html entities and additional html entities`, () => {
+    const code = `hello world&><"'{`
+    const mapping = {
+      "{": `&#123;`,
+    }
+    expect(escapeHtml(code, mapping)).toBe(
+      `hello world&amp;&gt;&lt;&quot;&#39;&#123;`
+    )
+  })
+})

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$/
       )
     })

packages/gatsby-remark-prismjs/src/escape-html.js

@@ -0,0 +1,26 @@
+module.exports = (code, additionalHtmlEscapes = {}) => {
+  const baseHTMLEscapes = {
+    "&": `&`,
+    ">": `>`,
+    "<": `&lt;`,
+    '"': `&quot;`,
+    "'": `&#39;`,
+  }
+
+  const htmlEscapes = {
+    ...additionalHtmlEscapes,
+    ...baseHTMLEscapes,
+  }
+
+  const escapedChars = char => htmlEscapes[char]
+
+  const chars = Object.keys(htmlEscapes)
+
+  const charsRe = new RegExp(`[${chars.join()}]`, `g`)
+
+  const rehasUnescapedChars = new RegExp(charsRe.source)
+
+  return code && rehasUnescapedChars.test(code)
+    ? code.replace(charsRe, escapedChars)
+    : code
+}

packages/gatsby-remark-prismjs/src/highlight-code.js

@@ -1,12 +1,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 +35,7 @@ module.exports = (
         console.warn(message, `applying generic code block`)
         unsupportedLanguages.add(lang)
       }
-      return _.escape(code)
+      return escapeHTML(code, additionalEscapeCharacters)
     }
   }
 

packages/gatsby-remark-prismjs/src/index.js

@@ -1,5 +1,4 @@
 const visit = require(`unist-util-visit`)
-
 const parseOptions = require(`./parse-options`)
 const loadLanguageExtension = require(`./load-prism-language-extension`)
 const highlightCode = require(`./highlight-code`)
@@ -20,6 +19,7 @@ module.exports = (
       host: `localhost`,
       global: false,
     },
+    escapeEntities = {},
   } = {}
 ) => {
   const normalizeLanguage = lang => {
@@ -94,7 +94,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 +118,8 @@ module.exports = (
       node.type = `html`
       node.value = `<code class="${className}">${highlightCode(
         languageName,
-        node.value
+        node.value,
+        escapeEntities
       )}</code>`
     })
   }