
Support for Heading ID Markdown Extensions for Remark, compatible with MDX.js.
Get Started
Most users should use remark-custom-heading-id:
$ npm install remark-custom-heading-id --save
import {remarkHeadingId} from 'remark-custom-heading-id';
import {remark} from 'remark';
import html from 'remark-rehype';
import stringify from 'rehype-stringify';
const result = remark()
.use(remarkHeadingId)
.use(html)
.use(stringify)
.processSync(`# Hello, world {#hello}`);
console.log(String(result));
import {remarkHeadingId} from 'remark-custom-heading-id';
import {remark} from 'remark';
import remarkMdx from 'remark-mdx';
import html from 'remark-rehype';
import stringify from 'rehype-stringify';
const result = remark()
.use(remarkMdx)
.use(remarkHeadingId)
.use(html)
.use(stringify)
.processSync(`# Hello, world {#hello}`);
console.log(String(result));
... with MDX-based plugins (e.g. next-mdx-remote)
import {remarkHeadingId} from 'remark-custom-heading-id';
import {serialize} from 'next-mdx-remote/serialize';
export default async function getMdxProps(source) {
return await serialize(source, {
mdxOptions: {
remarkPlugins: [remarkHeadingId],
},
});
}