mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
faef753730
* docs: mention admonition quirks with Prettier * Update markdown-features-admonitions.mdx * Update markdown-features-admonitions.mdx * Update markdown-features-admonitions.mdx
145 lines
2.8 KiB
Text
145 lines
2.8 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`](#).
|
|
|
|
:::
|
|
|
|
## Usage with Prettier {#usage-with-prettier}
|
|
|
|
If you use [Prettier](https://prettier.io) to format your Markdown files, Prettier might autoformat 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-ignore -->
|
|
```md
|
|
<!-- Prettier doesn't change this -->
|
|
::: note
|
|
|
|
Hello world
|
|
|
|
:::
|
|
|
|
<!-- Prettier changes this -->
|
|
::: note
|
|
Hello world
|
|
:::
|
|
|
|
<!-- to this -->
|
|
::: note Hello world:::
|
|
```
|
|
|
|
## 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>
|
|
```
|
|
|
|
:::
|