rehype-pretty-code: Doesn't seem to work with xdm (MDX 2)

I tried this plugin with xdm:

import fs from 'node:fs/promises'
import { compile } from 'xdm'
import { createRemarkPlugin } from '@atomiks/mdx-pretty-code'

const prettyCode = createRemarkPlugin({
  shikiOptions: {
    theme: JSON.parse(
      await fs.readFile('node_modules/shiki/themes/github-light.json', 'utf8')
    )
  }
})

const mdxContent = `
# Hello World

~~~js
console.log('Hello World')
~~~
`.trim()

const result = await compile(mdxContent, {
  remarkPlugins: [prettyCode],
})

console.log(String(result))

But I’m getting the following error:

Error: Cannot handle unknown node `raw`
    at Object.unknown (file:///Users/silvenon/Code/test/node_modules/hast-util-to-estree/index.js:155:9)
    at Object.one [as handle] (file:///Users/silvenon/Code/test/node_modules/zwitch/index.js:52:17)
    at all (file:///Users/silvenon/Code/test/node_modules/hast-util-to-estree/index.js:583:28)
    at Object.root (file:///Users/silvenon/Code/test/node_modules/hast-util-to-estree/index.js:508:20)
    at Object.one [as handle] (file:///Users/silvenon/Code/test/node_modules/zwitch/index.js:52:17)
    at toEstree (file:///Users/silvenon/Code/test/node_modules/hast-util-to-estree/index.js:119:24)
    at file:///Users/silvenon/Code/test/node_modules/xdm/lib/plugin/rehype-recma.js:15:20
    at wrapped (file:///Users/silvenon/Code/test/node_modules/trough/index.js:111:16)
    at next (file:///Users/silvenon/Code/test/node_modules/trough/index.js:62:23)
    at done (file:///Users/silvenon/Code/test/node_modules/trough/index.js:145:7)

I tried the same with @mdx-js/mdx and it works as expected. Maybe it’s an incompatibility with micromark?

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

Just to post back the solution, you were right, rehype-raw was the correct way 😄 I just had to list MDX-specific node types in the passThrough option:

import { nodeTypes } from 'xdm/lib/node-types.js'

await compile(mdxContent, {
  remarkPlugins: [prettyCode],
  rehypePlugins: [[rehypeRaw, { passThrough: nodeTypes }]]
})

silvenon on Jan 6, 2022

Refactored to a new package called rehype-pretty-code 🎉

Also has a site now: https://rehype-pretty-code.netlify.app/

atomiks on Jan 7, 2022

Thanks for pointing me in the right direction! I’m currently refactoring the package to be a Rehype plugin and I’ll keep this issue open until it’s complete

atomiks on Jan 6, 2022

Create an AST: something like what https://github.com/sachinraja/shiki-renderer-hast or https://github.com/rsclarke/rehype-shiki/blob/master/index.js does probably. (I searched for https://github.com/search?q=shiki+rehype and https://github.com/search?q=shiki+hast)

wooorm on Jan 6, 2022