rehype-mdx-code-props


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

Table of Contents

- Installation
- Usage
- API
- rehypeMdxCodeProps
- Compatibility
- License

Installation

``sh
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:

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

The following script:

`js
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:

`jsx
export default function MDXContent(props) {
return (


      {"console.log('Everything is awesome!');\n"}
    


)
}
`

The

 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.
$3
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 the elementAttributeNameCase 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.
License
MIT © Remco Haszing