添加目录 Inline TOC

Each markdown document displays a tab of content on the top-right corner.

But it is also possible to display an inline table of contents directly inside a markdown document, thanks to MDX.

Full table of contents #

The toc variable is available in any MDX document, and contain all the top level headings of a MDX document.

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />;

type TOCItem = {
  value: string;
  id: string;
  children: TOCItem[];
};

You can create this TOC tree manually, or derive a new TOC tree from the toc variable:

import TOCInline from '@theme/TOCInline';

<TOCInline
  toc={
    // Only show 3th and 5th top-level heading
    [toc[2], toc[4]]
  }
/>;

The underlying content is just an example to have more table-of-contents items available in current page.