준수 사항
기본 마크다운 구문에 추가해 아래와 같이 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`](#).
:::
:::warning
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 **with** some _Markdown_ `syntax`!]
Some **content** with some _Markdown_ `syntax`.
:::
syntax!Some content with some Markdown syntax.
중첩된 준수 사항
Admonitions can be nested. Use more colons : for each parent admonition level.
:::::info[Parent]
Parent content
::::danger[Child]
Child content
:::tip[Deep Child]
Deep child content
:::
::::
:::::
Parent content
Child content
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>
:::
- 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>
);
}
The types that are accepted are the same as above: note, tip, danger, info, warning. 선택적으로 JSX 요소 또는 문자열 또는 제목을 전달해 아이콘을 설정할 수 있습니다.
<Admonition type="tip" icon="💡" title="Did you know...">
Use plugins to introduce shorter syntax for the most commonly used JSX
elements in your project.
</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 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 키를 통해 옵션을 전달합니다.
export default {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
admonitions: {
keywords: ['note', 'tip', 'info', 'warning', 'danger'],
extendDefaults: true,
},
},
},
],
],
};
The plugin accepts the following options:
keywords: 준수 사항 타입으로 사용할 수 있는 키워드 배열입니다.extendDefaults: Should the provided options (such askeywords) be merged into the existing defaults. Defaults totrue.
keyword는 Admonition 컴포넌트의 type 속성으로 전달됩니다.
사용자 지정 준수 사항 타입 컴포넌트
By default, the theme doesn't know what do to with custom admonition keywords such as :::my-custom-admonition. It is your responsibility to map each admonition keyword to a React component so that the theme knows how to render them.
If you registered a new admonition type my-custom-admonition via the following config:
export default {
// ...
presets: [
[
'classic',
{
// ...
docs: {
admonitions: {
keywords: ['my-custom-admonition'],
extendDefaults: true,
},
},
},
],
],
};
You can provide the corresponding React component for :::my-custom-admonition by creating the following file (unfortunately, since it's not a React component file, it's not swizzlable):
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;
Now you can use your new admonition keyword in a Markdown file, and it will be parsed and rendered with your custom logic:
:::my-custom-admonition[My Title]
It works!
:::
My Title
It works!