메인 컨텐츠로 이동
버전: Canary 🚧

준수 사항

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

제목 설정하기

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

:::note Your Title

Some **content** with _Markdown_ `syntax`.

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

Some content with Markdown syntax.

중첩된 준수 사항

준수 사항을 중첩해 표시할 수 있습니다. 부모 수준의 준수 사항에는 더 많은 콜론 기호 :를 사용합니다.

:::::info Parent

Parent content

::::danger Child

Child content

:::tip Deep Child

Deep child content

:::

::::

:::::
http://localhost:3000
Parent

Parent content

Child

Child content

Deep Child

Deep child content

준수 사항 내에서 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가지 방식으로 준수 사항을 사용자 지정할 수 있습니다.

사용자 지정 렌더링 동작

스위즐링으로 각 준수 사항 타입을 렌더링하는 방법을 사용자 지정할 수 있습니다. 간단한 래퍼를 사용해 여러분이 원하는 목표를 달성할 수 있습니다. 예를 들어 아래의 예는 info 준수 사항 타입의 경우 아이콘을 변경합니다.

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

export default function AdmonitionWrapper(props) {
if (props.type !== 'info') {
return <Admonition title="My Custom Admonition Title" {...props} />;
}
return <Admonition icon={<MyCustomNoteIcon />} {...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'],
extendDefaults: true,
},
},
},
],
],
};

플러그인은 아래와 같은 옵션을 사용할 수 있습니다.

  • tag: 준수 사항임을 표시하는 태그입니다. 기본값은 :::.
  • keywords: 준수 사항 타입으로 사용할 수 있는 키워드 배열입니다.
  • extendDefaults: 제공된 옵션(예: keywords)을 기존 기본값과 합칩니다. 기본값은 false입니다.

keywordAdmonition 컴포넌트의 type 속성으로 전달됩니다.

사용자 지정 준수 사항 타입 컴포넌트

기본적으로 테마는 :::my-custom-admonition 같은 사용자 지정 준수 사항 키워드가 어떻게 동작하는지 알지 못합니다. 테마가 이를 어떻게 처리할지 알 수 있게 리액트 컴포넌트와 각 준수 사항 키워드를 연결해주는 것은 여러분의 책임입니다.

새로운 준수 사항 타입 my-custom-admonition을 등록한다면 아래와 같이 설정해줍니다.

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'classic',
{
// ...
docs: {
admonitions: {
tag: ':::',
keywords: ['my-custom-admonition'],
extendDefaults: true,
},
},
},
],
],
};

아래와 같은 파일을 만들어 :::my-custom-admonition에 해당하는 리액트 컴포넌트를 제공할 수 있습니다(안타깝게도 이 파일은 리액트 컴포넌트 파일이 아니라서 스위즐 대상은 아닙니다).

src/theme/Admonition/Types.js
import React from 'react';
import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';

function MyCustomAdmonition(props) {
return (
<div style={{border: 'solid red', padding: 10}}>
<h5 style={{color: 'blue', fontSize: 30}}>{props.title}</h5>
<div>{props.children}</div>
</div>
);
}

const AdmonitionTypes = {
...DefaultAdmonitionTypes,

// 여기에 모든 사용자 지정 준수 사항 유형을 추가합니다...
// 필요한 경우 기본 항목을 재정의할 수 있습니다.
'my-custom-admonition': MyCustomAdmonition,
};

export default AdmonitionTypes;

이제 마크다운 파일에서 새로운 준수 사항 키워드를 사용할 수 있으며 여러분이 설정한대로 구문을 해석하고 처리하게 됩니다.

:::my-custom-admonition Custom Admonition

잘 동작할겁니다!

:::
http://localhost:3000
Custom Admonition

잘 동작할겁니다!