3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-02 16:29:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): inline table-of-contents + refactor TOC (#3904)

Browse source 
* Add TOCInline theme component

* Add TOCInline theme component doc + migration guide

* remove useless getPathsToWatch on classic theme

* rename rightToc to toc

* add temp theme-bootstrap TOCInline comp to fix build issue
This commit is contained in:
Sébastien Lorber 2020-12-11 16:30:53 +01:00 • committed by GitHub
parent b11c24b752
commit 41ef333e47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 206 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

55
website/docs/markdown-features.mdx
View file

@ -471,6 +471,61 @@ import TabItem from '@theme/TabItem';
<TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
## Inline table of contents
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.
```jsx
import TOCInline from '@theme/TOCInline';
<TOCInline toc={toc} />;
```
import TOCInline from '@theme/TOCInline';
<BrowserWindow>
<TOCInline toc={toc} />
</BrowserWindow>
### 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[];
};
```
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 4th and 5th top-level heading
[toc[3], toc[4]]
}
/>;
```
<BrowserWindow>
<TOCInline toc={[toc[3], toc[4]]} />
</BrowserWindow>
## Callouts/admonitions
In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.