Headings

Remark Heading

Apply ids to headings.

MDX Compiler

import { compile } from '@mdx-js/mdx';
import { remarkHeading } from 'fumadocs-core/mdx-plugins';
 
await compile('...', {
  remarkPlugins: [remarkHeading],
});

This plugin is included by default on Fumadocs MDX.

Extract TOC

By default, it extracts the headings (table of contents) of a document to vfile.data.toc. You can disable it with:

import { remarkHeading } from 'fumadocs-core/mdx-plugins';
 
export default {
  remarkPlugins: [[remarkHeading, { generateToc: false }]],
};

Custom Ids

You can customise the heading id with [#slug].

# heading [#slug]

Output

An array of TOCItemType.

Prop	Type	Default
`title`	`ReactNode`	-
`url`	`string`	-
`depth`	`number`	-

Rehype Toc

Export table of contents (an array of TOCItemType), it allows JSX nodes which is not possible with a Remark plugin.

It requires MDX.js.

Usage

import { rehypeToc } from 'fumadocs-core/mdx-plugins';
 
export default {
  remarkPlugins: [rehypeToc],
};

Output

For a Markdown document:

## Hello `code`

An export will be created:

export const toc = [
  {
    title: (
      <>
        Hello <code>code</code>
      </>
    ),
    depth: 2,
    url: '#hello-code',
  },
];

Remark Heading

Extract TOC

Custom Ids

Output

Rehype Toc

Usage

Output

On this page