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>      <code>{"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