Skip to content

Commit e1a8db7

Browse files
authored
docs: add TOC heading level options to guide (facebook#7906)
docs: add documentation for TOC heading level options in guide
1 parent 8e5225a commit e1a8db7

File tree

1 file changed

+39
-2
lines changed

1 file changed

+39
-2
lines changed

website/docs/guides/markdown-features/markdown-features-toc.mdx

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ A special Markdown syntax lets you set an **explicit heading id**:
4949

5050
:::tip
5151

52-
Use the **[write-heading-ids](../../cli.md#docusaurus-write-heading-ids-sitedir)** CLI command to add explicit IDs to all your Markdown documents.
52+
Use the **[`write-heading-ids`](../../cli.md#docusaurus-write-heading-ids-sitedir)** CLI command to add explicit IDs to all your Markdown documents.
5353

5454
:::
5555

@@ -59,9 +59,46 @@ Generated heading IDs will be guaranteed to be unique on each page, but if you u
5959

6060
:::
6161

62+
## Table of contents heading level {#table-of-contents-heading-level}
63+
64+
Each Markdown document displays a table of contents on the top-right corner. By default, this table only shows h2 and h3 headings, which should be sufficient for an overview of the page structure. In case you need to change the range of headings displayed, you can customize the minimum and maximum heading level — either per page or globally.
65+
66+
To set the heading level for a particular page, use the `toc_min_heading_level` and `toc_max_heading_level` front matter.
67+
68+
```md title="myDoc.md"
69+
---
70+
# Display h2 to h5 headings
71+
toc_min_heading_level: 2
72+
toc_max_heading_level: 5
73+
---
74+
```
75+
76+
To set the heading level for _all_ pages, use the [`themeConfig.tableOfContents`](../../api/themes/theme-configuration.md#table-of-contents) option.
77+
78+
```js title="docusaurus.config.js"
79+
module.exports = {
80+
themeConfig: {
81+
tableOfContents: {
82+
// highlight-start
83+
minHeadingLevel: 2,
84+
maxHeadingLevel: 5,
85+
// highlight-end
86+
},
87+
},
88+
};
89+
```
90+
91+
If you've set the options globally, you can still override them locally via front matter.
92+
93+
:::note
94+
95+
The `themeConfig` option would apply to all TOC on the site, including [inline TOC](#inline-table-of-contents), but front matter options only affect the top-right TOC. You need to use the `minHeadingLevel` and `maxHeadingLevel` props to customize each `<TOCInline />` component.
96+
97+
:::
98+
6299
## Inline table of contents {#inline-table-of-contents}
63100

64-
Each Markdown document displays a table of contents 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.
101+
It is also possible to display an inline table of contents directly inside a Markdown document, thanks to MDX.
65102

66103
The `toc` variable is available in any MDX document and contains all the headings of an MDX document. By default, only `h2` and `h3` headings are displayed in the TOC. You can change which heading levels are visible by setting `minHeadingLevel` or `maxHeadingLevel` for individual `TOCInline` components.
67104

0 commit comments

Comments
 (0)