Change order of code block formatting to prevent removal of backticks (…

…#301)

* Change order code formatting to prevent removal of backticks

* PR feedback: double backtick support, bugfix language hinting
- add support for backticks in inline code blocks via double backticks per markdown "spec"
- fix bug that eats first line of code block when no language hint exists

server/formatter.js

@@ -108,19 +108,25 @@ function formatCode(html) {
     // strip interior <p> tags added by google
     content = content.replace(/(?:<\/p><p>|<br\/?>)/g, '\n').replace(/<\/?p>/g, '').trim()
     // try to find language hint within text block
-    const [, lang] = content.match(/^([^\n]+)\n(.+)/) || []
-    if (lang) content = content.replace(`${lang}\n`, '')
+    const [, lang] = content.match(/^(.+?)\n/) || []
 
-    const formattedContent = formatCodeContent(content)
     if (lang && hljs.getLanguage(lang)) {
-      const textOnlyContent = cheerio.load(formattedContent).text()
+      // if the language hint exists and contains a valid language, remove it from the code block
+      content = content.replace(`${lang}\n`, '')
+
+      const textOnlyContent = cheerio.load(content).text()
       const highlighted = hljs.highlight(lang, textOnlyContent, true)
-      return `<pre><code data-lang="${highlighted.language}">${highlighted.value}</code></pre>`
+      return `<pre><code data-lang="${highlighted.language}">${formatCodeContent(highlighted.value)}</code></pre>`
     }
-    return `<pre><code>${formattedContent}</code></pre>`
+    return `<pre><code>${formatCodeContent(content)}</code></pre>`
+  })
+
+  // Replace double backticks with <code>, for supporting backticks in inline code blocks
+  html = html.replace(/``(.+?`?)``/g, (match, content) => {
+    return `<code>${formatCodeContent(content)}</code>`
   })
 
-  // Replace single backticks with <code>, as long as they are not inside triple backticks
+  // Replace single backticks with <code>
   html = html.replace(/`(.+?)`/g, (match, content) => {
     return `<code>${formatCodeContent(content)}</code>`
   })

test/unit/htmlProcessing.test.js

@@ -113,6 +113,16 @@ describe('HTML processing', () => {
       const codeBlock = testGlobal.output('pre')
       assert.match(codeBlock.html(), /1 \+ 1 == 5/)
     })
+
+    it('retains code block backticks', () => {
+      const codeBlock = testGlobal.output('pre > code[data-lang="javascript"]')
+      assert.match(codeBlock.html(), /`/)
+    })
+
+    it('retains inline code backticks', () => {
+      const codeBlock = testGlobal.output("code:contains('backtick')")
+      assert.match(codeBlock.html(), /`backtick`/)
+    })
   })
 
   describe('inline code handling', () => {