본문으로 건너뛰기

마크다운 기능

다큐사우러스는 마크다운과 몇 가지 추가 기능을 지원합니다.

전문(前文)​

마크다운 문서는 전문이라 불리는 메타데이터를 다음과 같이 가지고 있습니다:

my-doc.md
---
id: my-doc-id
title: My document title
description: My document description
slug: /my-custom-url
---

## Markdown heading

Markdown text with [links](./hello.md)

링크​

URL 경로 또는 파일 상대 경로를 통해 일반적인 마크다운 링크를 지원합니다. 

[페이지 만들기](/create-a-page.md)를 어떻게 하는지 봅시다.
[페이지 만들기](./create-a-page.md)를 어떻게 하는지 봅시다.

결과: 페이지 만들기를 어떻게 하는지 봅시다.

이미지​

일반적인 마크다운 이미지를 지원합니다.

다음과 같이, 절대 경로를 통해 정적 디렉토리 (static/img/docusaurus.png)에 있는 이미지를 참조할 수도 있습니다:

![Docusaurus logo](/img/docusaurus.png)

Docusaurus logo

또한 아래의 코드처럼 현재 파일을 기준으로 상대적으로 이미지를 참조할 수 있습니다. 이는 참조되는 이미지가 참조하는 마크다운 파일과 가까울 때 특히 유용합니다:

![Docusaurus logo](./img/docusaurus.png)

코드 블럭​

마크다운 코드 블럭은 코드의 문법 강조 기능(Syntax highlighting)을 지원합니다.

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

충고​

다큐사우러스는 충고와 조언을 남기기 위한 특별한 문법을 가지고 있습니다.

:::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(`You clicked the color ${color} with label ${children}`)
    }}>
    {children}
  </span>
);

This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !

This is <Highlight color="#1877F2">Facebook blue</Highlight> !

이 색은 다큐사우러스 녹색 이에요!

이 색은 페이스북 청색 이에요!