MDX 작성하기

Docusaurus는 Markdown 구문을 지원하며 몇 가지 추가 기능을 제공합니다.

프론트 매터(Front Matter)#

Markdown 문서는 상단에 Front Matter를 작성해 문서의 메타 데이터를 정의할 수 있습니다.

---
id: my-doc
title: 문서 제목을 입력합니다.
description: 문서 내용을 요약 작성합니다.
sidebar_label: 사이드바에 표시 될 이름을 작성합니다.
---

Markdown 콘텐츠를 작성합니다.

링크(links)#

URL 또는 상대 경로는 일반적인 Markdown 링크와 동일하게 사용 가능합니다.

[페이지 생성](/create-a-page) 방법을 학습합니다.

[페이지 생성](./create-a-page.md) 방법을 학습합니다.

Docusaurus 사이트의 페이지 생성 방법을 학습합니다.

이미지(images)#

일반적인 Markdown 문서의 이미지 사용법과 동일합니다.

static/img/ 디렉토리에 이미지를 추가한 후, 다음과 같이 Markdown을 작성합니다.

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

Docusaurus 로고

코드 블록(Code Blocks)#

Markdown 코드 블록은 문법 구문 하이라이팅을 지원합니다.

```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) "말풍선(callouts)"을 표시하는 특수한 구문을 제공합니다.

:::tip 팁!
콜아웃은 짧은 텍스트를 설명하는 데 사용되며 **주의를 끌기 위한 목적을 가지는 텍스트 상자**를 말합니다.
:::

:::info 잠깐!
삽화에서 쓰이는(지시선을 포함하여) 번호나 설명을 "**콜아웃(callout)**"이라고 부릅니다.
만화에서 쓰이는 말풍선도 callout이라 일컫습니다.
:::

:::danger 주의!
너무 잦은 콜아웃은 오히려 "소음"이 될 수 있으니 사용에 주의하세요!
:::

팁!

콜아웃은 짧은 텍스트를 설명하는 데 사용되며 주의를 끌기 위한 목적을 가지는 텍스트 상자를 말합니다.

잠깐!

삽화에서 쓰이는(지시선을 포함하여) 번호나 설명을 "콜아웃(callout)"이라고 부릅니다. 만화에서 쓰이는 말풍선도 콜아웃이라 일컫습니다.

주의!

너무 잦은 콜아웃은 오히려 "소음"이 될 수 있으니 사용에 주의하세요!

React 컴포넌트(components)#

MDX 덕분에 Markdown 문서 안에 React 컴포넌트를 사용할 수 있어 필요한 경우 문서에 인터랙션 기능을 손쉽게 추가할 수 있습니다.

Highlight 컴포넌트 예시

export const Highlight = ({ children, color, ...restProps }) => (
  <span
    style={{
      marginLeft: 5,
      marginRight: 5,
      borderRadius: 4,
      padding: '0.4rem 0.6em',
      backgroundColor: color,
      color: '#fefdff',
    }}
    {...restProps}
  >
    {children}
  </span>
)



<Highlight color="#25c2a0">Docusaurus 그린</Highlight>, <Highlight color="#1877F2">Facebook 블루</Highlight>는 매우 유쾌한 색상입니다.

Docusaurus 그린과Facebook 블루는 매우 유쾌한 색상입니다.