From 8da4a8e78ad5fea7afd36c47f79f6d9f714c0809 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 11 Jan 2023 23:54:45 +0000
Subject: [PATCH] fix: escape backticks within codeblocks

resolves https://github.com/elk-zone/elk/issues/970
---
 composables/content-parse.ts                  | 5 ++++-
 tests/__snapshots__/content-rich.test.ts.snap | 2 ++
 tests/content-rich.test.ts                    | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/composables/content-parse.ts b/composables/content-parse.ts
index dea3d5b2..845cdb09 100644
--- a/composables/content-parse.ts
+++ b/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>`
       })
diff --git a/tests/__snapshots__/content-rich.test.ts.snap b/tests/__snapshots__/content-rich.test.ts.snap
index c7202ea1..f48d4942 100644
--- a/tests/__snapshots__/content-rich.test.ts.snap
+++ b/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
diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts
index c3df5b0c..920ab457 100644
--- a/tests/content-rich.test.ts
+++ b/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')