메인 컨텐츠로 이동
버전: Canary 🚧

마크다운 기능

문서는 사용자가 만날 수 있는 제품 접점 중 하나입니다. 적절하게 구성되고 쓰인 문서는 사용자가 제품을 빠르게 이해하는 데 도움을 줍니다. 우리의 목표는 여러분의 사용자가 가능한 한 빨리 필요한 정보를 찾고 이해할 수 있도록 도와주는 것입니다.

도큐사우루스 2는 여러분이 문서를 쉽게 작성할 수 있도록 최신의 도구를 사용하고 있습니다. 리액트 컴포넌트를 활용하거나 라이브 코딩 블록을 사용해 사용자가 코드 실행 결과를 바로 확인할 수 있도록 문서를 작성할 수 있습니다. 문서에서 벗어나지 않고 떠오른 아이디어를 코드로 확인해볼 수 있습니다. 이런 방식은 잠재적인 사용자에게 흥미를 주는 가장 효과적인 방법입니다.

important

이번 세션에서는 기본으로 제공되는 도큐사우루스 콘텐츠 플러그인을 사용하고 있다고 가정합니다.

기본 기능​

마크다운은 가독성있는 문법을 사용해 정형화된 콘텐츠를 작성할 수 있습니다.

우리는 MDX를 구문 분석 엔진으로 사용합니다. 이 엔진은 문서 내 리액트 컴포넌트를 렌더링하는 것 같이 표준 마크다운 구문을 구문 분석하는 것 이상을 수행할 수 있습니다.

### My Doc Section

Hello world message with some **bold** text, some _italic_ text, and a [link](/)

![img alt](/img/docusaurus.png)
http://localhost:3000

My Doc Section

Hello world message with some bold text, some italic text and a link

img alt

마크다운은 선언적입니다

일부는 마크다운과 HTML 간 일대일 상관 관계를 가정할 수 있습니다. 예를 들어 ![Preview](/img/docusaurus.png)는 항상 <img src="/img/docusaurus.png" alt="Preview" />가 됩니다. 하지만 항상 그런 것은 아닙니다.

마크다운 구문 ![message](url)은 선언적으로 도큐사우루스에 이미지를 여기에 삽입해야 한다고 알려주지만 파일 경로를 URL 경로로 변환하는 것과 같은 다른 작업을 수행할 수 있으므로 생성된 마크업이 다른 마크다운 렌더러 출력이나 JSX/HTML 코드에 대한 수동 변환의 출력과 다를 수 있습니다.

일반적으로 마크업의 의미(```로 감싼 항목은 코드 블록이 되고 > 는 따옴표가 되는 등)는 가정할 수 있지만 실제 컴파일된 결과는 그럴 수 없습니다.

프런트 매터​

프런트 매터는 여러분의 마크다운 파일에 메타데이터를 추가하기 위해 사용됩니다. 모든 콘텐츠 플러그인에는 자체 프런트 매터 스키마가 있으며 콘텐츠 또는 다른 구성에서 추론된 기본 메타데이터를 강화하기 위해 프런트 매터를 사용합니다.

프런트 매터는 파일 맨 위에 제공되며 세 개의 대시(---)로 묶입니다. 콘텐츠는 YAML로 구문 분석됩니다.

---
title: My Doc Title
more_data:
  - Can be provided
  - as: objects
    or: arrays
---

인용 단락​

마크다운 인용 단락에 스타일을 적용합니다.

> Easy to maintain open source documentation websites.
>
> — Docusaurus
http://localhost:3000

Easy to maintain open source documentation websites.

— Docusaurus

Details​

마크다운은 HTML 요소와 details HTML 요소에 스타일을 적용할 수 있습니다.

### Details element example

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br/>
    <details>
      <summary>
        Nested toggle! Some surprise inside...
      </summary>
      <div>😲😲😲😲😲</div>
    </details>
  </div>
</details>
http://localhost:3000

Details element example

Toggle me!
This is the detailed content

Nested toggle! Some surprise inside...
😲😲😲😲😲
참고

실제 HTML 요소는 아니고 React JSX 요소입니다. 자세한 내용은 다음에 살펴보겠습니다!