77 lines
1.6 KiB
Markdown
77 lines
1.6 KiB
Markdown
|
# rehype-mdx-export-headings
|
||
|
A rehype plugin to extract headings (e.g. h2, h3) from mdx, assign them ids, and export headings list
|
||
|
|
||
|
## Installation
|
||
|
```
|
||
|
# If you are using yarn
|
||
|
yarn add @sup39/rehype-mdx-export-headings
|
||
|
|
||
|
# If you are using npm
|
||
|
npm install @sup39/rehype-mdx-export-headings
|
||
|
```
|
||
|
|
||
|
## Configuration
|
||
|
|property|type|description|
|
||
|
|--|--|--|
|
||
|
|`tags`|`string[]`|Tag name of headings. Default value is `['h2']`|
|
||
|
|`name`|`string`|Export name. Default value is `'headings'`|
|
||
|
|
||
|
## Usage
|
||
|
### Next.js with MDX support
|
||
|
In next.config.js:
|
||
|
```javascript
|
||
|
const ExportHeadings = require('@sup39/rehype-mdx-export-headings');
|
||
|
|
||
|
const withMDX = require('@next/mdx')({
|
||
|
extension: /\.mdx?$/,
|
||
|
options: {
|
||
|
rehypePlugins: [ExportHeadings],
|
||
|
},
|
||
|
});
|
||
|
module.exports = withMDX({
|
||
|
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||
|
});
|
||
|
```
|
||
|
|
||
|
#### with options
|
||
|
```javascript
|
||
|
const ExportHeadings = require('@sup39/rehype-mdx-export-headings');
|
||
|
|
||
|
const withMDX = require('@next/mdx')({
|
||
|
extension: /\.mdx?$/,
|
||
|
options: {
|
||
|
rehypePlugins: [
|
||
|
() => ExportHeadings({
|
||
|
tags: ['h2', 'h3'],
|
||
|
name: 'labels',
|
||
|
}),
|
||
|
],
|
||
|
},
|
||
|
});
|
||
|
module.exports = withMDX({
|
||
|
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||
|
});
|
||
|
```
|
||
|
|
||
|
#### mjs
|
||
|
If you are using next.config.mjs:
|
||
|
```javascript
|
||
|
import mdx from '@next/mdx';
|
||
|
import ExportHeadings from '@sup39/rehype-mdx-export-headings';
|
||
|
|
||
|
const withMDX = mdx({
|
||
|
extension: /\.mdx?$/,
|
||
|
options: {
|
||
|
rehypePlugins: [
|
||
|
() => ExportHeadings({
|
||
|
tags: ['h2', 'h3'],
|
||
|
name: 'labels',
|
||
|
}),
|
||
|
],
|
||
|
},
|
||
|
});
|
||
|
export default withMDX({
|
||
|
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
|
||
|
});
|
||
|
```
|