rehype-mdx-code-props

rehype-mdx-code-props

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

Table of Contents

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

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 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