mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 10:48:05 +02:00
083037d7a5
* prepare admonitions redesign * Docusaurus admonition cleanup * cover more edge cases in Docusaurus admonitions page: interleaving code blocks and links * cover more edge cases in Docusaurus admonitions page: interleaving code blocks and links * update Infima with new alerts
135 lines
2.5 KiB
Text
135 lines
2.5 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!
|
|
|
|
```mdx
|
|
import Tabs from '@theme/Tabs';
|
|
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
:::tip Use tabs in admonitions
|
|
|
|
<Tabs
|
|
defaultValue="apple"
|
|
values={[
|
|
{label: 'Apple', value: 'apple'},
|
|
{label: 'Orange', value: 'orange'},
|
|
{label: 'Banana', value: 'banana'},
|
|
]}>
|
|
<TabItem value="apple">This is an apple 🍎</TabItem>
|
|
<TabItem value="orange">This is an orange 🍊</TabItem>
|
|
<TabItem value="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
|
|
defaultValue="apple"
|
|
values={[
|
|
{label: 'Apple', value: 'apple'},
|
|
{label: 'Orange', value: 'orange'},
|
|
{label: 'Banana', value: 'banana'},
|
|
]}>
|
|
<TabItem value="apple">This is an apple 🍎</TabItem>
|
|
<TabItem value="orange">This is an orange 🍊</TabItem>
|
|
<TabItem value="banana">This is a banana 🍌</TabItem>
|
|
</Tabs>
|
|
```
|
|
|
|
:::
|