feat(rehype-shikiji): support metastring from node.properties (#114)

Co-authored-by: Anthony Fu <[email protected]>
Co-authored-by: Anthony Fu <[email protected]>

packages/rehype-shikiji/package.json

@@ -58,6 +58,7 @@
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
+    "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.0"

packages/rehype-shikiji/src/core.ts

@@ -58,6 +58,15 @@ export type RehypeShikijiCoreOptions =
   & CodeOptionsMeta
   & RehypeShikijiExtraOptions
 
+declare module 'hast' {
+  interface Data {
+    meta?: string
+  }
+  interface Properties {
+    metastring?: string
+  }
+}
+
 const rehypeShikijiFromHighlighter: Plugin<[HighlighterGeneric<any, any>, RehypeShikijiCoreOptions], Root> = function (
   highlighter,
   options,
@@ -108,16 +117,16 @@ const rehypeShikijiFromHighlighter: Plugin<[HighlighterGeneric<any, any>, Rehype
         return
       }
 
-      const attrs = (head.data as any)?.meta
-      const meta = parseMetaString?.(attrs, node, tree) || {}
+      const metaString = head.data?.meta ?? head.properties.metastring ?? ''
+      const meta = parseMetaString?.(metaString, node, tree) || {}
 
       const codeOptions: CodeToHastOptions = {
         ...rest,
         lang: language.slice(prefix.length),
         meta: {
           ...rest.meta,
           ...meta,
-          __raw: attrs,
+          __raw: metaString,
         },
       }
 
@@ -132,7 +141,7 @@ const rehypeShikijiFromHighlighter: Plugin<[HighlighterGeneric<any, any>, Rehype
         })
       }
 
-      if (highlightLines && typeof attrs === 'string') {
+      if (highlightLines && typeof metaString === 'string') {
         codeOptions.transformers ||= []
         codeOptions.transformers.push(
           transformerMetaHighlight({

packages/rehype-shikiji/test/core.test.ts

@@ -2,10 +2,13 @@ import fs from 'node:fs/promises'
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
+import rehypeRaw from 'rehype-raw'
 import rehypeStringify from 'rehype-stringify'
+import { visit } from 'unist-util-visit'
 import { expect, it } from 'vitest'
 
 import { getHighlighter } from 'shikiji'
+import type { Root } from 'hast'
 import rehypeShikijiFromHighlighter from '../src/core'
 
 it('run', async () => {
@@ -30,3 +33,37 @@ it('run', async () => {
 
   expect(file.toString()).toMatchFileSnapshot('./fixtures/a.core.out.html')
 })
+
+it('run with rehype-raw', async () => {
+  const highlighter = await getHighlighter({
+    themes: [
+      'vitesse-light',
+    ],
+    langs: [
+      'javascript',
+    ],
+  })
+
+  const rehypeMetaString = () => (tree: Root) => {
+    visit(tree, 'element', (node) => {
+      if (node.tagName === 'code' && node.data?.meta) {
+        node.properties ??= {}
+        node.properties.metastring = node.data.meta
+      }
+    })
+  }
+
+  const file = unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeMetaString)
+    .use(rehypeRaw)
+    .use(rehypeShikijiFromHighlighter, highlighter, {
+      theme: 'vitesse-light',
+      highlightLines: true,
+    })
+    .use(rehypeStringify)
+    .processSync(await fs.readFile(new URL('./fixtures/a.md', import.meta.url)))
+
+  expect(file.toString()).toMatchFileSnapshot('./fixtures/a.core.out.html')
+})