fix: escape backticks within codeblocks

resolves https://github.com/elk-zone/elk/issues/970

composables/content-parse.ts

@@ -55,7 +55,10 @@ export function parseMastodonHTML(
     // Handle code blocks
     html = html
       .replace(/>(```|~~~)(\w*)([\s\S]+?)\1/g, (_1, _2, lang: string, raw: string) => {
-        const code = htmlToText(raw).replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        const code = htmlToText(raw)
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/`/, '&#96;')
         const classes = lang ? ` class="language-${lang}"` : ''
         return `><pre><code${classes}>${code}</code></pre>`
       })

tests/__snapshots__/content-rich.test.ts.snap

@@ -1,5 +1,7 @@
 // Vitest Snapshot v1
 
+exports[`content-rich > block with backticks 1`] = `"<p><pre>[(\`number string) (\`tag string)]</pre></p>"`;
+
 exports[`content-rich > code frame 1`] = `
 "<p>Testing code block</p><p></p><p><pre lang=\\"ts\\">import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;
 // tracks mouse position

tests/content-rich.test.ts

@@ -20,6 +20,11 @@ describe('content-rich', () => {
     expect(formatted).toMatchSnapshot()
   })
 
+  it ('block with backticks', async () => {
+    const { formatted } = await render('<p>```<br />[(`number string) (`tag string)]<br />```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
+
   it('group mention', async () => {
     const { formatted } = await render('<p><span class="h-card"><a href="https://lemmy.ml/c/pilipinas" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>pilipinas</span></a></span></p>', undefined, [{ id: '', username: 'pilipinas', url: 'https://lemmy.ml/c/pilipinas', acct: 'pilipinas@lemmy.ml' }])
     expect(formatted).toMatchSnapshot('html')