본문으로 건너뛰기

마크다운 기능

Docusaurus는 Markdown 및 몇 가지 추가 기능을 지원합니다.

Front Matter​

마크다운 문서는 상단에 Front Matter라고 불리는 메타데이터를 가집니다.

my-doc.md
---
id: my-doc-id
title: 내 문서 제목
description: 내 문서 설명
slug: /my-custom-url
---

## 마크다운 제목

[링크](./hello.md)가 포함된 마크다운 텍스트

링크​

URL 경로 또는 상대 파일 경로를 사용하는 일반 마크다운 링크가 지원됩니다.

[페이지 만들기](/create-a-page) 방법을 알아봅시다.
[페이지 만들기](./create-a-page.md) 방법을 알아봅시다.

결과: 페이지 만들기 방법을 알아봅시다.

이미지​

일반 마크다운 이미지가 지원됩니다.

정적 디렉토리(static/img/docusaurus.png)의 이미지를 참조하기 위해 절대 경로를 사용할 수 있습니다.

![Docusaurus 로고](/img/docusaurus.png)

Docusaurus 로고

현재 파일에 대한 상대 경로로 이미지를 참조할 수도 있습니다. 이는 이미지를 사용하는 마크다운 파일 가까이에 이미지를 배치할 때 특히 유용합니다.

![Docusaurus 로고](./img/docusaurus.png)

코드 블록​

구문 강조 기능이 포함된 마크다운 코드 블록이 지원됩니다.

```jsx title="src/components/HelloDocusaurus.js"
function HelloDocusaurus() {
  return <h1>안녕하세요, Docusaurus!</h1>;
}
```
src/components/HelloDocusaurus.js
function HelloDocusaurus() {
  return <h1>안녕하세요, Docusaurus!</h1>;
}

경고 (Admonitions)​

Docusaurus는 경고 및 콜아웃을 만들기 위한 특별한 구문을 제공합니다.

:::tip[내 팁]

이 멋진 기능 옵션을 사용해 보세요.

:::

:::danger[주의]

이 작업은 위험합니다.

:::
내 팁

이 멋진 기능 옵션을 사용해 보세요.

주의

이 작업은 위험합니다.

MDX 및 React 컴포넌트​

MDX는 문서를 더욱 대화형으로 만들 수 있게 해주며, 마크다운 내부에서 모든 React 컴포넌트를 사용할 수 있게 합니다.

export const Highlight = ({children, color}) => (
  <span
    style={{
      backgroundColor: color,
      borderRadius: '20px',
      color: '#fff',
      padding: '10px',
      cursor: 'pointer',
    }}
    onClick={() => {
      alert(`라벨이 ${children}인 ${color} 색상을 클릭하셨습니다.`)
    }}>
    {children}
  </span>
);

이것은 <Highlight color="#25c2a0">Docusaurus 초록색</Highlight>입니다!

이것은 <Highlight color="#1877F2">Facebook 파란색</Highlight>입니다!

이것은 Docusaurus 초록색입니다!

이것은 Facebook 파란색입니다!