마크다운 기능

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

프론트 매터

마크다운 문서는 상단에 프론트 매터라는 메타데이터가 있습니다:

## // highlight-start

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

---

// highlight-end

## 마크다운 제목

[링크](./hello.md)를 사용한 마크다운 텍스트

링크

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

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

[페이지 만들기](./create-a-page.md) 방법을 살펴봅니다.

결과: 페이지 만들기 방법을 살펴봅니다.

이미지

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

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

![도큐사우루스 로고](/img/docusaurus.png)

현재 파일을 기준으로 이미지를 참조할 수도 있습니다. 이 기능은 마크다운 파일을 사용하여 이미지를 마크다운 파일에 가깝게 배치할 때 특히 유용합니다:

![도큐사우루스 로고](./img/docusaurus.png)

코드 블록

마크다운 코드 블록은 구문 강조 표시와 함께 지원됩니다.

function HelloDocusaurus() {
    return (
        <h1>Hello, Docusaurus!</h1>
    )
}

function HelloDocusaurus() {
  return <h1>Hello, Docusaurus!</h1>;
}

Admonitions

Docusaurus에는 권고/콜아웃을 생성하는 특별한 구문이 있습니다:

:::tip[My tip]

Use this awesome feature option

:::

:::danger[Take care]

This action is dangerous

:::

Use this awesome feature option

This action is dangerous

MDX and React Components

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> !

This is Docusaurus green !

This is Facebook blue !