Skip to main content
버전: 2.x

마크다운 기능

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

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

정보

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

기본 기능​

Markdown은 읽기 쉬운 구문으로 서식이 있는 콘텐츠를 작성할 수 있게 해 주는 문법입니다.

We use MDX as the parsing engine, which can do much more than just parsing standard Markdown syntax, like rendering React components inside your documents as well.

### My Doc Section

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

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

내 문서 섹션

헬로 월드 메시지에는 굵은 텍스트, 기울임 텍스트와 링크가 포함되어 있습니다

이미지 대체 텍스트

Markdown은 선언적입니다

일부는 Markdown과 HTML이 1-1로 대응한다고 가정하고, 예를 들어 ![Preview](/img/docusaurus.png)가 항상 <img src="/img/docusaurus.png" alt="Preview" />로 그대로 변환된다고 생각할 수 있습니다. 하지만, 실제로는 그렇지 않습니다.

Markdown 구문 ![message](url)는 여기에 이미지를 삽입해야 한다고 도큐사우루스에 선언적으로 알려줄 뿐이지만, 파일 경로를 URL 경로로 변환하는 등의 추가 처리가 이루어질 수 있으므로, 생성된 마크업은 다른 Markdown 렌더러의 출력이나 단순히 해당 JSX/HTML 코드로 직접 옮긴 결과와 다를 수 있습니다.

일반적으로 마크업의 의미 (```로 둘러싸면 코드 블록이 되고; >는 인용 단락이 되는 등)만 가정해야 하며, 실제 컴파일된 출력까지 가정해서는 안 됩니다.

프런트 매터​

프런트 매터는 Markdown 파일에 메타데이터를 추가하는 데 사용됩니다. 모든 콘텐츠 플러그인은 자체 프런트 매터 스키마를 가지며, 프런트 매터를 사용해 콘텐츠나 다른 설정에서 추론한 기본 메타데이터를 보완합니다.

프런트 매터는 파일 맨 위에 작성하며, 대시 세 개로 이루어진 ---로 감쌉니다. 내용은 YAML로 파싱됩니다.

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

인용 단락​

Markdown 인용 단락에는 아름다운 스타일이 적용됩니다:

> 유지보수가 쉬운 오픈 소스 문서 웹사이트.
>
> — 도큐사우루스
http://localhost:3000

유지보수가 쉬운 오픈 소스 문서 웹사이트.

— 도큐사우루스

접기/펼치기​

Markdown에는 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...

😲😲😲😲😲
참고

In practice, those are not really HTML elements, but React JSX elements, which we'll cover next!