준수 사항
기본 마크다운 구문에 추가해 아래와 같이 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`](#).
:::
프리티어(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`.
:::
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>
:::
Use tabs in admonitions
- Apple
- Orange
- Banana
JSX 사용하기
마크다운을 사용하지 않고 @theme/Admonition
컴포넌트를 사용해 같은 결과를 얻을 수 있습니다.
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 요소 또는 문자열 또는 제목을 전달해 아이콘을 설정할 수 있습니다.
<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>
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
준수 사항 타입의 경우 아 이콘을 변경합니다.
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
키를 통해 옵션을 전달합니다.
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.