메인 컨텐츠로 이동
버전: 2.0.0-beta.21

마크다운 기능

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

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

정보

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

기본 기능

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

우리는 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 코드에 대한 수동 변환의 출력과 다를 수 있습니다.

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

인용 단락

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

> 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 요소입니다. 자세한 내용은 다음에 살펴보겠습니다!