Awesome
rehype-mdx-code-props
A rehype MDX plugin for interpreting markdown code meta as props.
Table of Contents
Installation
npm install rehype-mdx-code-props
Usage
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.
API
This package has a default export rehypeMdxCodeProps
.
rehypeMdxCodeProps
An MDX rehype plugin for transforming markdown code meta into JSX props.
Options
elementAttributeNameCase
('html' | 'react'
): The casing to use for attribute names. This should match theelementAttributeNameCase
value passed to MDX. (Default:'react'
)tagName
('code' | 'pre'
): The tag name to add the attributes to. (Default:'pre'
)
Compatibility
This plugin works with Node.js 16 or greater and MDX 3.