Support for additional metadata in mdx files

[cschroeter]

Is there a way to keep the live=true flag when using the code: s.mdx() feature?

``tsx live=true
<Button colorPalette="red" variant="ghost">
  Button
</Button>
``

[zce]

use rehype plugin

here is an example:

() => tree => {
  visit(tree, 'element', (node, index, parent) => {
    if (parent?.tagName !== 'pre' || node.tagName !== 'code') return
    console.log(node.properties) // <- metastring in properties
    if (!node.properties.metastring) return
    parent.properties['data-meta'] = node.properties.metastring
    // or node.properties['data-meta'] = node.properties.metastring
  })
}

MDX may be slightly different, you can explore it yourself

[cschroeter]

@zce

Thanks for the quick response. I decided to take a different approach. Instead of adding tsx live=true, I added a comment at the top of the file and removed this comment in the preview:

// live
<Button colorPalette="red" variant="ghost">
  Button
</Button>