mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 02:37:59 +02:00
c86dfbda61
* feat: add all TOC levels to MDX loader * feat: add theme-level config for heading depth * test: add remark MDX loader test * fix: limit maxDepth validation to H2 - H6 * refactor: set default `maxDepth` using `joi` * refactor: `maxDepth` -> `maxHeadingLevel * refactor: invert underlying TOC depth API * refactor: make TOC algorithm level-aware * feat: add support for per-doc TOC heading levels * feat: support document-level heading levels for blog * fix: correct validation for toc level frontmatter * fix: ensure TOC doesn't generate redundant DOM * perf: simpler TOC heading search alg * docs: document heading level props for `TOCInline` * Update website/docs/guides/markdown-features/markdown-features-inline-toc.mdx Co-authored-by: HonkingGoose <34918129+HonkingGoose@users.noreply.github.com> * docs: fix docs (again) * create dedicated test file for heading searching logic: exhaustive tests will be simpler to write * toc search: add real-world test * fix test * add dogfooding tests for toc min/max * add test for min/max toc frontmatter * reverse min/max order * add theme minHeadingLevel + tests * simpler TOC rendering logic * simplify TOC implementation (temp, WIP) * reverse unnatural order for minHeadingLevel/maxHeadingLevel * add TOC dogfooding tests to all content plugins * expose toc min/max heading level frontmatter to all 3 content plugins * refactor blogLayout: accept toc ReactElement directly * move toc utils to theme-common * add tests for filterTOC * create new generic TOCItems component * useless css file copied * fix toc highlighting className conflicts * update doc * fix types Co-authored-by: HonkingGoose <34918129+HonkingGoose@users.noreply.github.com> Co-authored-by: slorber <lorber.sebastien@gmail.com>
124 lines
2.3 KiB
Text
124 lines
2.3 KiB
Text
---
|
|
id: inline-toc
|
|
title: Inline TOC
|
|
description: Using inline table-of-contents inside Docusaurus Markdown
|
|
slug: /markdown-features/inline-toc
|
|
---
|
|
|
|
import BrowserWindow from '@site/src/components/BrowserWindow';
|
|
|
|
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 {#full-table-of-contents}
|
|
|
|
The `toc` variable is available in any MDX document, and contains all the headings of a 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`.
|
|
|
|
```jsx
|
|
import TOCInline from '@theme/TOCInline';
|
|
|
|
<TOCInline toc={toc} />;
|
|
```
|
|
|
|
```mdx-code-block
|
|
import TOCInline from '@theme/TOCInline';
|
|
|
|
<BrowserWindow>
|
|
|
|
<TOCInline toc={toc} />
|
|
|
|
</BrowserWindow>
|
|
```
|
|
|
|
## Custom table of contents {#custom-table-of-contents}
|
|
|
|
The `toc` props is just a list of table of contents items:
|
|
|
|
```ts
|
|
type TOCItem = {
|
|
value: string;
|
|
id: string;
|
|
children: TOCItem[];
|
|
level: number;
|
|
};
|
|
```
|
|
|
|
You can create this TOC tree manually, or derive a new TOC tree from the `toc` variable:
|
|
|
|
```jsx
|
|
import TOCInline from '@theme/TOCInline';
|
|
|
|
<TOCInline
|
|
toc={
|
|
// Only show 3th and 5th top-level heading
|
|
[toc[2], toc[4]]
|
|
}
|
|
/>;
|
|
```
|
|
|
|
```mdx-code-block
|
|
<BrowserWindow>
|
|
|
|
<TOCInline toc={[toc[2], toc[4]]} />
|
|
|
|
</BrowserWindow>
|
|
```
|
|
|
|
---
|
|
|
|
:::caution
|
|
|
|
The underlying content is just an example to have more table-of-contents items available in current page.
|
|
|
|
:::
|
|
|
|
## Example Section 1 {#example-section-1}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 1 a {#example-subsection-1-a}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 1 b {#example-subsection-1-b}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 1 c {#example-subsection-1-c}
|
|
|
|
Lorem ipsum
|
|
|
|
## Example Section 2 {#example-section-2}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 2 a {#example-subsection-2-a}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 2 b {#example-subsection-2-b}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 2 c {#example-subsection-2-c}
|
|
|
|
Lorem ipsum
|
|
|
|
## Example Section 3 {#example-section-3}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 3 a {#example-subsection-3-a}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 3 b {#example-subsection-3-b}
|
|
|
|
Lorem ipsum
|
|
|
|
### Example Subsection 3 c {#example-subsection-3-c}
|
|
|
|
Lorem ipsum
|