Skip to main content

docusaurus markdown特殊用法

详细用法参考

更多Markdown新增功能用法参考官方教程

1. 选项卡Tabs​

使用方法：

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>

展示效果：

This is an apple 🍎

2. 告示框Admonitions​

使用方法：

:::note  (自定义标题，可省略)

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::tip

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::info

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::caution

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::danger

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

展示效果：

(自定义标题，可省略)

Some content with markdown syntax. Check this api.

tip

Some content with markdown syntax. Check this api.

info

Some content with markdown syntax. Check this api.

caution

Some content with markdown syntax. Check this api.

danger

Some content with markdown syntax. Check this api.

3. 细节 Details​

使用方法：

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>
    This is the detailed content
    </div>
    <br/>
    <details>
      <summary>
        Nested toggle! Some surprise inside...
      </summary>
      <div>
        😲😲😲😲😲
      </div>
    </details>
  </div>
</details>

效果展示：

Toggle me!
This is the detailed content

Nested toggle! Some surprise inside...
😲😲😲😲😲
测试代码折叠 
#include "debug.h"

int main(void)
{
    Delay_Init();
    USART_Printf_Init(115200);

    printf("ch32v307 hello world\r\n");

    while(1);  
}