참조

Markdown 치트시트

모든 핵심 Markdown 문법과 그로부터 생성되는 HTML, 그리고 렌더링 결과입니다. 예시는 변환기와 동일한 엔진으로 빌드 시점에 실시간 변환됩니다.

제목

# 문자를 1개에서 6개까지 사용합니다.

Markdown

# Heading 1
## Heading 2
### Heading 3

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

렌더링 결과

Heading 1

Heading 2

Heading 3

굵게, 기울임, 취소선

취소선에는 GFM이 필요합니다.

Markdown

**bold**, *italic*, ***both***, ~~strikethrough~~

HTML

<p><strong>bold</strong>, <em>italic</em>, <em><strong>both</strong></em>, <del>strikethrough</del></p>

렌더링 결과

bold, italic, both, ~~strikethrough~~

링크

인라인, 제목 포함, 자동 링크.

Markdown

[Inline link](https://example.com)

[With a title](https://example.com "Example")

https://example.com

HTML

<p><a href="https://example.com">Inline link</a></p>
<p><a href="https://example.com" title="Example">With a title</a></p>
<p><a href="https://example.com">https://example.com</a></p>

렌더링 결과

Inline link

With a title

https://example.com

이미지

앞에 !가 붙는다는 점만 빼면 링크와 같습니다.

Markdown

![Site logo](/favicon.svg)

HTML

<p><img src="/favicon.svg" alt="Site logo"></p>

렌더링 결과

순서 없는 목록

-, *, + 중 하나를 사용하세요. 중첩하려면 두 칸 들여쓰세요.

Markdown

- Apples
- Oranges
  - Blood orange
- Pears

HTML

<ul>
  <li>Apples</li>
  <li>Oranges
    <ul>
      <li>Blood orange</li>
    </ul>
  </li>
  <li>Pears</li>
</ul>

렌더링 결과

Apples
Oranges
- Blood orange
Pears

순서 있는 목록

번호가 순차적일 필요는 없습니다.

Markdown

1. First
2. Second
3. Third

HTML

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

렌더링 결과

First
Second
Third

작업 목록

GFM 체크박스입니다.

Markdown

- [x] Write the draft
- [ ] Publish it

HTML

<ul>
  <li><input checked="" disabled="" type="checkbox"> Write the draft</li>
  <li><input disabled="" type="checkbox"> Publish it</li>
</ul>

렌더링 결과

Write the draft
Publish it

인용문

줄 앞에 >를 붙이세요.

Markdown

> Simple is better
> than complex.

HTML

<blockquote>
  <p>Simple is better
  than complex.</p>
</blockquote>

렌더링 결과

Simple is better than complex.

인라인 코드

백틱으로 감싸세요.

Markdown

Run `npm install` first.

HTML

<p>Run <code>npm install</code> first.</p>

렌더링 결과

Run npm install first.

펜스 코드 블록

구문 강조를 위해 여는 펜스 뒤에 언어를 추가하세요.

Markdown

```js
const answer = 42;
```

HTML

<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> answer = <span class="hljs-number">42</span>;
</code></pre>

렌더링 결과

const answer = 42;

표

GFM. 구분선 행의 콜론이 정렬을 지정합니다.

Markdown

| Name | Qty |
| ---- | --: |
| Tea  |   2 |
| Milk |  10 |

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th align="right">Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tea</td>
      <td align="right">2</td>
    </tr>
    <tr>
      <td>Milk</td>
      <td align="right">10</td>
    </tr>
  </tbody>
</table>

렌더링 결과

Name	Qty
Tea	2
Milk	10

가로선

-, *, _ 중 하나를 3개 이상 사용하세요.

Markdown

Above

---

Below

HTML

<p>Above</p>
<hr>
<p>Below</p>

렌더링 결과

Above

Below

줄바꿈

줄 끝에 공백 두 칸이나 백슬래시를 붙이거나 “줄바꿈을 <br>로 변환”을 활성화하세요.

Markdown

First line\
Second line

HTML

<p>First line<br>Second line</p>

렌더링 결과

First line
Second line

이스케이프

백슬래시로 특수 문자를 이스케이프하세요.

Markdown

\*not italic\*

HTML

<p>*not italic*</p>

렌더링 결과

*not italic*

핵심 Markdown에 포함되지 않는 것

각주, 정의 목록, 수식, 이모지 단축코드는 이 변환기가 처리하지 않는 확장 기능입니다. Markdown 안의 원본 HTML은 HTML 정화가 꺼져 있을 때는 그대로 전달되고, 켜져 있을 때는 정리됩니다.

변환기에서 사용해보기 이메일용 Markdown to HTML