mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-01 02:12:36 +02:00
refactor: redesign admonitions/callouts/quotes (#5193)
* 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
This commit is contained in:
parent
24156efcfb
commit
083037d7a5
8 changed files with 104 additions and 47 deletions
|
@ -11,61 +11,61 @@ Example:
|
|||
|
||||
:::note
|
||||
|
||||
The content and title *can* include markdown.
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::tip You can specify an optional title
|
||||
:::tip
|
||||
|
||||
Heads up! Here's a pro-tip.
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
||||
Useful information.
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
Warning! You better pay attention!
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::danger
|
||||
|
||||
Danger danger, mayday!
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
The content and title _can_ include markdown.
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::tip You can specify an optional title
|
||||
:::tip
|
||||
|
||||
Heads up! Here's a pro-tip.
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
||||
Useful information.
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
Warning! You better pay attention!
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
:::danger
|
||||
|
||||
Danger danger, mayday!
|
||||
Some **content** with _markdown_ `syntax`. Check [this `api`](#).
|
||||
|
||||
:::
|
||||
|
||||
|
@ -75,12 +75,61 @@ You may also specify an optional title
|
|||
|
||||
:::note Your Title
|
||||
|
||||
The content and title *can* include markdown.
|
||||
Some **content** with _markdown_ `syntax`.
|
||||
|
||||
:::
|
||||
|
||||
:::note Your Title
|
||||
|
||||
The content and title _can_ include Markdown.
|
||||
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>
|
||||
```
|
||||
|
||||
:::
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue