Skip to main content

Introduction

Tabs​

Docusaurus 提供了 <Tabs> 组件，你可以通过 MDX 在 Markdown 中使用：

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
<Tabs>
  <TabItem value="apple" label="Apple" default>This is an apple 🍎</TabItem>
  <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
  <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs>
http://localhost:3000
This is an apple 🍎

Code blocks​

```jsx {1,4-6,11} title="Highlighting with metadata string" showLineNumbers
import React from "react";
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
  return <div>Foo</div>;
}
export default MyComponent;
```
http://localhost:3000
Highlighting with metadata string
import React from "react";
function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }
  return <div>Foo</div>;
}
export default MyComponent;

Admonitions​

:::note This is a note
Hello world
:::
:::tip This is a tip
Hello world
:::
:::info This is an info
Hello world
:::
:::caution This is a caution
Hello world
:::
:::danger This is a danger
Hello world! Some **content** with _Markdown_ `syntax`.
:::
http://localhost:3000
This is a note

Hello world

This is a tip

Hello world

This is an info

Hello world

This is a caution

Hello world

This is a danger

Hello world! Some content with Markdown syntax.

You can use MDX inside admonitions too!

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
:::tip Use tabs in admonitions
<Tabs>
  <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
  <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
  <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs>
:::
http://localhost:3000
Use tabs in admonitions
This is an apple 🍎

Table of contents​

http://localhost:3000
tip

Use the write-heading-ids CLI command to add explicit IDs to all your Markdown documents.

It is also possible to display an inline table of contents directly inside a Markdown document, thanks to MDX.

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.

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />
http://localhost:3000