Soom

Headings

Process headings from your document

Remark Heading

Applies 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.

AutoTypeTable is temporarily disabled due to package compatibility issues.

Rehype TOC

Exports 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 {
  rehypePlugins: [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',
  },
];

How is this guide?