What to do if a remark plugin generates HTML nodes? about xdm

[silvenon]

Oh, I just discovered the passThrough option!

const result = await compile(mdxContent, {
  remarkPlugins: [prettyCode],
  rehypePlugins: [[rehypeRaw, { passThrough: ['mdxJsxFlowElement'] }]],
});

Excellent!

[ChristianMurphy]

I'm doing great, you?

Good to hear! I'm well also.

I just discovered the passThrough option!

Indeed, pass through should do the trick ✨

[ChristianMurphy]

Hey @silvenon! 👋
Long time no see, how are you?

I'm getting raw errors

rehype-raw can help https://github.com/rehypejs/rehype-raw
it re-parses the raw/html nodes into an HTML AST (hast) which XDM can process
For example: https://stackblitz.com/edit/node-ccmljd?file=index.js

source from sandbox

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

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

const mdxContent = `
~~~js
console.log('Hello World')
~~~
`.trim();

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

console.log(String(result));

[silvenon]

Hey @ChristianMurphy! I'm doing great, you? 😄

Thanks for your reply! I forgot to say, rehype-raw fails on mdxJsxFlowElement nodes, so it would fail as soon as you put some JSX in mdxContent. Should I create a custom rehype plugin that runs rehype-raw selectively like this?

const rehypeMdxRaw = () => tree => {
  visit(tree, (node, index, parent) => {
    if (node.type === 'raw') {
      parent.children[index] = rehypeRaw()(node)
    }
  })
}