메인 컨텐츠로 이동
Version: 2.0.0-beta.15

준수 사항

마크다운 기본 문법에 추가해서 MDX에서 준수 사항을 표기하기 위해 remark-admonitions을 사용합니다. 준수 사항 단락은 3개의 콜론으로 감싸서 작성합니다.

예:

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

:::
http://localhost:3000
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

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:::

제목 설정하기

준수 사항 표기 시 제목을 추가로 설정할 수 있습니다.

:::note Your Title

Some **content** with _markdown_ `syntax`.

:::
http://localhost:3000
Your Title

Some content with markdown syntax.

준수 사항 내에서 MDX 사용하기

준수 사항 표기 시 MDX를 사용할 수 있습니다.

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>

:::
http://localhost:3000
Use tabs in admonitions
This is an apple 🍎

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, caution. 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...">
<p>
Use plugins to introduce shorter syntax for the most commonly used JSX
elements in your project.
</p>
</Admonition>
http://localhost:3000
💡Did you know...

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