준수 사항
기본 마크다운 구문에 추가해 아래와 같이 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:::
제목 설정하기
준수 사항 표기 시 제목을 추가로 설정할 수 있습니다.
:::note Your Title
Some **content** with _Markdown_ `syntax`.
:::
Some content with Markdown syntax.
중첩된 준수 사항
준수 사항을 중첩해 표시할 수 있습니다. 부모 수준의 준수 사항에는 더 많은 콜론 기호 :를 사용합니다.
:::::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>
);
}
허용되는 유형은 위에서 설명한 것과 같습니다. 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가지 방식으로 준수 사항을 사용자 지정할 수 있습니다.
사용자 지정 렌더링 동작
스위즐링으로 각 준수 사항 타입을 렌더링하는 방법을 사용자 지정할 수 있습니다. 간단한 래퍼를 사용해 여러분이 원하는 목표를 달성할 수 있습니다. 예를 들어 아래의 예는 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 키를 통해 옵션을 전달합니다.
module.exports = {
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
admonitions: {
tag: ':::',
keywords: ['note', 'tip', 'info', 'caution', 'danger'],
extendDefaults: true,
},
},
},
],
],
};
플러그인은 아래와 같은 옵션을 사용할 수 있습니다.
tag: 준수 사항임을 표시하는 태그입니다. 기본값은:::.keywords: 준수 사항 타입으로 사용할 수 있는 키워드 배열입니다.extendDefaults: 제공된 옵션(예:keywords)을 기존 기본값과 합칩니다. 기본값은false입니다.
keyword는 Admonition 컴포넌트의 type 속성으로 전달됩니다.
사용자 지정 준수 사항 타입 컴포넌트
기본적으로 테마는 :::my-custom-admonition 같은 사용자 지정 준수 사항 키워드가 어떻게 동작하는지 알지 못합니다. 테마가 이를 어떻게 처리할지 알 수 있게 리액트 컴포넌트와 각 준수 사항 키워드를 연결해주는 것은 여러분의 책임입니다.
새로운 준수 사항 타입 my-custom-admonition을 등록한다면 아래와 같이 설정해줍니다.
module.exports = {
// ...
presets: [
[
'classic',
{
// ...
docs: {
admonitions: {
tag: ':::',
keywords: ['my-custom-admonition'],
extendDefaults: true,
},
},
},
],
],
};
아래와 같은 파일을 만들어 :::my-custom-admonition에 해당하는 리액트 컴포넌트를 제공할 수 있습니다(안타깝게도 이 파일은 리액트 컴포넌트 파일이 아니라서 스위즐 대상은 아닙니다).
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
잘 동작할겁니다!
:::
Custom Admonition
잘 동작할겁니다!