Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remcohaszing/rehype-mdx-code-props
A rehype MDX plugin for interpreting markdown code meta as props
https://github.com/remcohaszing/rehype-mdx-code-props
hast html markdown mdx rehype rehype-plugin unified
Last synced: about 20 hours ago
JSON representation
A rehype MDX plugin for interpreting markdown code meta as props
- Host: GitHub
- URL: https://github.com/remcohaszing/rehype-mdx-code-props
- Owner: remcohaszing
- License: mit
- Created: 2023-05-30T19:52:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-21T15:47:01.000Z (5 months ago)
- Last Synced: 2024-10-31T00:00:17.804Z (15 days ago)
- Topics: hast, html, markdown, mdx, rehype, rehype-plugin, unified
- Language: TypeScript
- Homepage:
- Size: 869 KB
- Stars: 35
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# rehype-mdx-code-props
[](https://github.com/remcohaszing/rehype-mdx-code-props/actions/workflows/ci.yaml)
[](https://codecov.io/gh/remcohaszing/rehype-mdx-code-props)
[](https://www.npmjs.com/package/rehype-mdx-code-props)
[](https://www.npmjs.com/package/rehype-mdx-code-props)
A [rehype](https://github.com/rehypejs/rehype) [MDX](https://mdxjs.com) plugin for interpreting
markdown code meta as props.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [`rehypeMdxCodeProps`](#rehypemdxcodeprops)
- [Compatibility](#compatibility)
- [License](#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](https://mdxjs.com/docs/using-mdx/#components) to give the props meaning.
> **Note** This plugin transforms the [`hast`](https://github.com/syntax-tree/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](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)