-
diff --git a/composables/content.ts b/composables/content.ts
index b0b2476d..49844899 100644
--- a/composables/content.ts
+++ b/composables/content.ts
@@ -60,9 +60,10 @@ export function contentToVNode(
return `:${name}:`
})
// handle code frames
- .replace(/
(```|~~~)([\w]*)([\s\S]+?)\1/g, (_1, _2, lang, raw) => {
- const code = htmlToText(`
${raw}
`)
- return `
`
+ .replace(/>(```|~~~)([\s\S]+?)\1/g, (_1, _2, raw) => {
+ const plain = htmlToText(raw)
+ const [lang, ...code] = plain.split('\n')
+ return `>
`
})
const tree = parseFragment(content)
diff --git a/layouts/default.vue b/layouts/default.vue
index a4f13fbf..cb9c7021 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,7 +23,6 @@
diff --git a/styles/global.css b/styles/global.css
index c23ad6c0..0d7a5dc3 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -69,7 +69,7 @@ html {
}
.code-block {
- --at-apply: bg-code text-0.9rem p3 rounded overflow-auto leading-1.6em;
+ --at-apply: bg-code text-0.9rem p3 mt-2 rounded overflow-auto leading-1.6em;
.shiki {
background: transparent !important;
diff --git a/tests/__snapshots__/content.test.ts.snap b/tests/__snapshots__/content.test.ts.snap
index 3e2c95d6..6f3499e7 100644
--- a/tests/__snapshots__/content.test.ts.snap
+++ b/tests/__snapshots__/content.test.ts.snap
@@ -1,15 +1,20 @@
// Vitest Snapshot v1
exports[`content-rich > code frame 1`] = `
-"Testing code block
-
-import { useMouse, usePreferredDark } from '@vueuse/core'
+"Testing code block
import { useMouse, usePreferredDark } from '@vueuse/core'
+
// tracks mouse position
const { x, y } = useMouse()
// is the user prefers dark theme
-const isDark = usePreferredDark()
-
+const isDark = usePreferredDark()
"
+`;
+
+exports[`content-rich > code frame 2 1`] = `
+"
+
+ Testing
+
const a = hello
+
"
`;
diff --git a/tests/content.test.ts b/tests/content.test.ts
index 2fecf9cb..ae475044 100644
--- a/tests/content.test.ts
+++ b/tests/content.test.ts
@@ -33,15 +33,27 @@ describe('content-rich', () => {
const { formatted } = await render('Testing code block
```ts
import { useMouse, usePreferredDark } from '@vueuse/core'
// tracks mouse position
const { x, y } = useMouse()
// is the user prefers dark theme
const isDark = usePreferredDark()
```
')
expect(formatted).toMatchSnapshot()
})
+
+ it('code frame 2', async () => {
+ const { formatted } = await render('@antfu Testing
```ts
const a = hello
```
')
+ expect(formatted).toMatchSnapshot()
+ })
})
async function render(content: string, emojis?: Record) {
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,