mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 10:17:55 +02:00
123 lines
2.2 KiB
Text
123 lines
2.2 KiB
Text
---
|
|
id: admonitions
|
|
title: Admonitions
|
|
description: Handling admonitions/callouts in Docusaurus Markdown
|
|
slug: /markdown-features/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.
|
|
|
|
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`](#).
|
|
|
|
:::
|
|
|
|
:::caution
|
|
|
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
|
|
:::
|
|
|
|
:::danger
|
|
|
|
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
|
|
|
:::
|
|
|
|
:::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`](#).
|
|
|
|
:::
|
|
|
|
## Specifying title {#specifying-title}
|
|
|
|
You may also specify an optional title
|
|
|
|
:::note Your Title
|
|
|
|
Some **content** with _markdown_ `syntax`.
|
|
|
|
:::
|
|
|
|
:::note Your Title
|
|
|
|
Some **content** with _markdown_ `syntax`.
|
|
|
|
:::
|
|
|
|
## Admonitions with MDX
|
|
|
|
You can use MDX inside admonitions too!
|
|
|
|
```jsx
|
|
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>
|
|
|
|
:::
|
|
```
|
|
|
|
```mdx-code-block
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
```
|
|
|
|
:::tip Use tabs in admonitions
|
|
|
|
```mdx-code-block
|
|
<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>
|
|
```
|
|
|
|
:::
|