A rehype MDX plugin for interpreting markdown code meta as props.

• Installation
• Usage
• API
  • rehypeMdxCodeProps
    • Options
• Compatibility
• License

npm install rehype-mdx-code-props

This plugin interprets markdown code block metadata as JSX props.

For example, given a file named example.mdx with the following content:

```js copy filename="awesome.js" onOpen={props.openDemo} {...props}
console.log('Everything is awesome!')
```

The following script:

import { readFile } from 'node:fs/promises'

import { compile } from '@mdx-js/mdx'
import rehypeMdxCodeProps from 'rehype-mdx-code-props'

const { value } = await compile(await readFile('example.mdx'), {
  jsx: true,
  rehypePlugins: [rehypeMdxCodeProps]
})
console.log(value)

Roughly yields:

export default function MDXContent(props) {
  return (
    <pre copy filename="awesome.js" onOpen={props.openDemo} {...props}>
      <code className="language-js">{"console.log('Everything is awesome!');\n"}</code>
    </pre>
  )
}

The <pre /> element doesn’t support those custom props. Use custom components to give the props meaning.

Note This plugin transforms the hast (HTML) nodes into JSX. After running this plugin, they can no longer be processed by other plugins. To combine it with other plugins, such as syntax highlighting plugins, rehype-mdx-code-props must run last.

This package has a default export rehypeMdxCodeProps.

An MDX rehype plugin for transforming markdown code meta into JSX props.

• elementAttributeNameCase ('html' | 'react'): The casing to use for attribute names. This should match the elementAttributeNameCase value passed to MDX. (Default: 'react')
• tagName ('code' | 'pre'): The tag name to add the attributes to. (Default: 'pre')

This plugin works with Node.js 16 or greater and MDX 3.

MIT © Remco Haszing