feat: improve code block parsing

tests/__snapshots__/content.test.ts.snap

@@ -1,15 +1,20 @@
 // Vitest Snapshot v1
 
 exports[`content-rich > code frame 1`] = `
-"<p>Testing code block</p>
-<pre lang=\\"ts\\">
-import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;
+"<p>Testing code block</p><p><pre lang=\\"ts\\">import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;
+
 // tracks mouse position
 const { x, y } = useMouse()
 // is the user prefers dark theme
-const isDark = usePreferredDark()</pre
->
-<p></p>
+const isDark = usePreferredDark()</pre></p>"
+`;
+
+exports[`content-rich > code frame 2 1`] = `
+"<p>
+  <span class=\\"h-card\\"><a class=\\"u-url mention\\" to=\\"/@antfu@mas.to\\"></a></span>
+  Testing<br />
+  <pre lang=\\"ts\\">const a = hello</pre>
+</p>
 "
 `;
 

tests/content.test.ts

@@ -33,15 +33,27 @@ describe('content-rich', () => {
     const { formatted } = await render('<p>Testing code block</p><p>```ts<br />import { useMouse, usePreferredDark } from &#39;@vueuse/core&#39;</p><p>// tracks mouse position<br />const { x, y } = useMouse()</p><p>// is the user prefers dark theme<br />const isDark = usePreferredDark()<br />```</p>')
     expect(formatted).toMatchSnapshot()
   })
+
+  it('code frame 2', async () => {
+    const { formatted } = await render('<p><span class=\"h-card\"><a href=\"https://mas.to/@antfu\" class=\"u-url mention\">@<span>antfu</span></a></span> Testing<br />```ts<br />const a = hello<br />```</p>')
+    expect(formatted).toMatchSnapshot()
+  })
 })
 
 async function render(content: string, emojis?: Record<string, Emoji>) {
   const vnode = contentToVNode(content, emojis)
   const html = (await renderToString(vnode))
     .replace(/<!--[\[\]]-->/g, '')
-  const formatted = format(html, {
-    parser: 'html',
-  })
+  let formatted = ''
+
+  try {
+    formatted = format(html, {
+      parser: 'html',
+    })
+  }
+  catch (e) {
+    formatted = html
+  }
 
   return {
     vnode,