Admonitions

In addition to the basic Markdown syntax, we have a special admonitions syntax by wrapping text with a set of 3 colons, followed by a label denoting its type.

Example:

:::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`](#).

:::

:::warning

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.

提示

Some content with Markdown syntax. Check this api.

信息

Some content with Markdown syntax. Check this api.

注意

Some content with Markdown syntax. Check this api.

危险

Some content with Markdown syntax. Check this api.

Usage with Prettier

If you use Prettier to format your Markdown files, Prettier might auto-format your code to invalid admonition syntax. To avoid this problem, add empty lines around the starting and ending directives. This is also why the examples we show here all have empty lines around the content.

<!-- Prettier doesn't change this -->
:::note

Hello world

:::

<!-- Prettier changes this -->
:::note
Hello world
:::

<!-- to this -->
::: note Hello world:::

Specifying title

You may also specify an optional title.

:::note[Your Title **with** some _Markdown_ `syntax`!]

Some **content** with some _Markdown_ `syntax`.

:::

Your Title with some Markdown syntax!

Some content with some Markdown syntax.

Nested admonitions

Admonitions can be nested. Use more colons : for each parent admonition level.

:::::info[Parent]

Parent content

::::danger[Child]

Child content

:::tip[Deep Child]

Deep child content

:::

::::

:::::

Parent

Parent content

Child

Child content

Deep Child

Deep child content

Admonitions with MDX

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>

:::

Use tabs in admonitions

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

Usage in JSX

Outside of Markdown, you can use the @theme/Admonition component to get the same output.

MyReactPage.jsx

import Admonition from '@theme/Admonition';

export default function MyReactPage() {
  return (
    <div>
      <Admonition type="info">
        <p>Some information</p>
      </Admonition>
    </div>
  );
}

The types that are accepted are the same as above: note, tip, danger, info, warning. Optionally, you can specify an icon by passing a JSX element or a string, or a title:

MyReactPage.jsx

<Admonition type="tip" icon="💡" title="Did you know...">
  Use plugins to introduce shorter syntax for the most commonly used JSX
  elements in your project.
</Admonition>

💡Did you know...

Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.

Customizing admonitions

There are two kinds of customizations possible with admonitions: parsing and rendering.

Customizing rendering behavior

You can customize how each individual admonition type is rendered through swizzling. You can often achieve your goal through a simple wrapper. For example, in the follow example, we swap out the icon for info admonitions only.

src/theme/Admonition.js

import React from 'react';
import Admonition from '@theme-original/Admonition';
import MyCustomNoteIcon from '@site/static/img/info.svg';

export default function AdmonitionWrapper(props) {
  if (props.type !== 'info') {
    return <Admonition title="My Custom Admonition Title" {...props} />;
  }
  return <Admonition icon={<MyCustomNoteIcon />} {...props} />;
}

Customizing parsing behavior

Admonitions are implemented with a Remark plugin. The plugin is designed to be configurable. To customize the Remark plugin for a specific content plugin (docs, blog, pages), pass the options through the admonitions key.

docusaurus.config.ts

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          admonitions: {
            keywords: ['note', 'tip', 'info', 'warning', 'danger'],
            extendDefaults: true,
          },
        },
      },
    ],
  ],
};

The plugin accepts the following options:

• keywords: An array of keywords that can be used as the type for the admonition.
• extendDefaults: Should the provided options (such as keywords) be merged into the existing defaults. Defaults to true.

The keyword will be passed as the type prop of the Admonition component.