본문으로 건너뛰기
버전: 2.1.0

준수 사항

기본 마크다운 구문에 추가해 아래와 같이 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
노트

Some content with Markdown syntax. Check this api.

팁

Some content with Markdown syntax. Check this api.

정보

Some content with Markdown syntax. Check this api.

주의

Some content with Markdown syntax. Check this api.

위험

Some content with Markdown syntax. Check this api.

프리티어(Prettier) 사용하기​

프리티어를 사용해 마크다운 파일의 포맷을 처리한다면 프리티어가 잘못된 준수 사항 구문으로 자동 수정할 수 있습니다. 이 문제를 피하려면 시작과 종료 지시문 주위에 빈 줄을 추가하세요. 이곳에 사용한 모든 예제에 빈 줄을 사용한 이유이기도 합니다.

<!-- Prettier doesn't change this -->
:::note

Hello world

:::

<!-- Prettier changes this -->
:::note
Hello world
:::

<!-- to this -->
::: note Hello world:::

제목 설정하기​

You may also specify an optional title.

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

JSX 사용하기​

마크다운을 사용하지 않고 @theme/Admonition 컴포넌트를 사용해 같은 결과를 얻을 수 있습니다.

MyReactPage.jsx
import Admonition from '@theme/Admonition';

export default function MyReactPage() {
  return (
    <div>
      <Admonition type="info">
        <p>Some information</p>
      </Admonition>
    </div>
  );
}

허용되는 유형은 위에서 설명한 것과 같습니다. note, tip, danger, info, caution. 선택적으로 JSX 요소 또는 문자열 또는 제목을 전달해 아이콘을 설정할 수 있습니다.

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.

사용자 지정 준수 사항​

구문분석과 렌더링 2가지 방식으로 준수 사항을 사용자 지정할 수 있습니다.

사용자 지정 렌더링 동작​

You can customize how each individual admonition type is rendered through swizzling. 간단한 래퍼를 사용해 여러분이 원하는 목표를 달성할 수 있습니다. 예를 들어 아래의 예는 info 준수 사항 타입의 경우 아이콘을 변경합니다.

src/theme/Admonition.js
import React from 'react';
import Admonition from '@theme-original/Admonition';
import MyIcon from '@site/static/img/info.svg';

export default function AdmonitionWrapper(props) {
  if (props.type !== 'info') {
    return <Admonition {...props} />;
  }
  return <Admonition icon={<MyIcon />} {...props} />;
}

사용자 지정 구문분석 동작​

준수사항은 Remark 플러그인으로 구현됐습니다. 이 플러그인은 설정할 수 있도록 설계됐습니다. 특정 콘텐츠 플러그인(docs, blog, pages)의 Remark 플러그인을 사용자 지정하기 위해 admonitions 키를 통해 옵션을 전달합니다.

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          admonitions: {
            tag: ':::',
            keywords: ['note', 'tip', 'info', 'caution', 'danger'],
          },
        },
      },
    ],
  ],
};

플러그인은 2가지 옵션을 사용할 수 있습니다.

  • tag: 준수 사항임을 표시하는 태그입니다. 기본값은 :::.
  • keywords: 준수 사항 타입으로 사용할 수 있는 키워드 배열입니다. 이를 재정의하면 기본값이 적용되지 않는 것에 유의하세요.

keyword는 Admonition 컴포넌트의 type 속성으로 전달됩니다. 기본값보다 더 많은 타입을 등록하는 경우 컨테이너의 스타일, 아이콘, 기본 제목 등을 포함한 구현을 해주어야 합니다. You would usually need to eject the @theme/Admonition component, so you could re-use the same infrastructure as the other types.