fix(render): unwrap a bare shiki class on pre back to a plain fence (#259)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: hendrikheil

packages/comark/src/internal/stringify/attributes.ts

@@ -128,10 +128,10 @@ export function userBlockAttrs(tag: string, attributes: Record<string, unknown>)
       if (remaining) result[key] = remaining
       continue
     }
-    if (key === 'class' && tag === 'pre' && typeof value === 'string' && value.startsWith('shiki ')) {
-      // Shiki injects `shiki [shiki-themes] <themes…> dark:<theme>` and any
-      // user-supplied class is appended after it. Recover the user portion by
-      // dropping everything up to and including the first `dark:*` token.
+    if (key === 'class' && tag === 'pre' && typeof value === 'string' && value.startsWith('shiki')) {
+      // Shiki injects `shiki [shiki-themes] <themes…>` (or a bare `shiki`) and
+      // appends any user class after a `.` separator. Recover the user portion
+      // by dropping everything up to and including that separator.
       const tokens = value.split(/\s+/)
       let cutoff = tokens.findIndex((t) => t === '.')
 

packages/comark/test/plugins/highlight.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest'
+import type { ComarkTree } from '../../src/types'
+import { renderMarkdown } from '../../src/render'
+
+describe('shiki code block round-trip', () => {
+  // The highlight plugin's injected attrs have no markdown form, so a
+  // highlighted block must serialize to a plain fence, never a `::pre{...}`.
+  function preTree(preClass: string): ComarkTree {
+    return {
+      frontmatter: {},
+      meta: {},
+      nodes: [['pre', { language: 'bash', class: preClass }, ['code', { class: 'language-bash' }, 'npx install']]],
+    }
+  }
+
+  it('serializes a bare `shiki` class back to a plain fence', async () => {
+    // Single-theme shiki emits a bare `class="shiki"`.
+    const md = await renderMarkdown(preTree('shiki'))
+    expect(md.trim()).toBe('```bash\nnpx install\n```')
+    expect(md).not.toContain('::pre')
+  })
+
+  it('serializes a multi-token shiki class back to a plain fence', async () => {
+    // Dual-theme shiki emits `shiki shiki-themes <theme> dark:<theme>`.
+    const md = await renderMarkdown(preTree('shiki shiki-themes github-dark dark:github-dark'))
+    expect(md.trim()).toBe('```bash\nnpx install\n```')
+    expect(md).not.toContain('::pre')
+  })
+
+  it('keeps a plain fence for a highlighted code block inside a component slot', async () => {
+    const tree: ComarkTree = {
+      frontmatter: {},
+      meta: {},
+      nodes: [
+        [
+          'code-preview',
+          {},
+          [
+            'template',
+            { name: 'code' },
+            ['pre', { language: 'bash', class: 'shiki' }, ['code', { class: 'language-bash' }, 'npx install']],
+          ],
+        ],
+      ],
+    }
+    const md = await renderMarkdown(tree)
+    expect(md).not.toContain('::pre')
+    expect(md).toContain('```bash\nnpx install\n```')
+  })
+})