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:
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
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:
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'],
});