Markdown 미리보기

사용 방법

1. 왼쪽 에디터에 Markdown을 입력합니다.
2. 오른쪽에 실시간으로 HTML 미리보기가 표시됩니다.
3. HTML 복사로 생성된 HTML을 복사합니다.
4. 초기화로 에디터를 비웁니다.

Markdown에 대하여

Markdown은 2004년 John Gruber가 만든 경량 마크업 언어입니다. 읽기 쉬운 일반 텍스트로 HTML 콘텐츠를 작성할 수 있으며, README, 문서, 블로그 글 등에 널리 사용됩니다.

렌더러

미리보기는 micromark 4와 micromark-extension-gfm 3을 씁니다. micromark는 CommonMark를 완전히 따르며 사양의 테스트를 통과한다고 밝히고 있습니다. GFM 확장은 GFM 사양 가운데 GitHub가 쓰는 5가지 기능(표, 작업 목록, 취소선, 자동 링크, 각주)을 더합니다. 미리보기의 링크는 새 탭에서 열리므로 클릭해도 작성 중인 내용이 사라지지 않습니다.

예시

다음 입력:

# Release notes

See https://example.com and `a **b** c`.

- Parent
  - Child
- [X] Done
- [x] done

3. third
4. fourth

| Item | Price |
|:-----|------:|
| Widget | $9.99 |
| a \| b | 1 |

<b>raw</b> and <img src=x alt=y>

에서 생성되는 HTML(‘HTML 복사’ 내용):

<h1>Release notes</h1>
<p>See <a href="https://example.com">https://example.com</a> and <code>a **b** c</code>.</p>
<ul>
<li>Parent
<ul>
<li>Child</li>
</ul>
</li>
<li><input type="checkbox" disabled="" checked="" /> Done</li>
<li><input type="checkbox" disabled="" checked="" /> done</li>
</ul>
<ol start="3">
<li>third</li>
<li>fourth</li>
</ol>
<table>
<thead>
<tr>
<th align="left">Item</th>
<th align="right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Widget</td>
<td align="right">$9.99</td>
</tr>
<tr>
<td align="left">a | b</td>
<td align="right">1</td>
</tr>
</tbody>
</table>
<p>&lt;b&gt;raw&lt;/b&gt; and &lt;img src=x alt=y&gt;</p>

한 줄씩 보면, 맨 URL은 링크가 되고(GFM 자동 링크) 백틱 안의 별표는 그대로 남습니다(코드는 강조로 해석하지 않음). 들여 쓴 - Child는 중첩 목록이고, [X]와 [x]는 모두 체크된 작업입니다. 3.으로 시작하는 목록은 시작 번호가 start 속성에 들어갑니다. 구분 행의 콜론으로 왼쪽·오른쪽 정렬이 정해지고, \|는 셀 안의 세로 막대로 셀을 나누지 않습니다. 마지막 줄의 원시 HTML은 글자로 출력됩니다.

원시 HTML은 글자로 표시

CommonMark에서는 Markdown 안에 HTML 태그를 쓸 수 있고, GitHub는 그중 일부를 걸러서 표시합니다. GitHub의 렌더링 과정은 script 태그, 인라인 스타일, class / id 속성을 제거합니다. 이 미리보기는 더 엄격하게 모든 원시 HTML을 이스케이프합니다(micromark의 기본 동작). 이유는 미리보기가 실행되는 곳에 있습니다. zerotool.dev에서는 다른 도구가 입력을 브라우저 저장소에 보관하며, 같은 출처의 페이지에서 읽을 수 있습니다. 원시 HTML을 렌더링하면 붙여 넣은 텍스트의 <img src=x onerror=…>가 이 사이트에서 스크립트로 실행됩니다. 이스케이프하면 텍스트 안의 마크업이 페이지 요소가 되지 않으며, 복사한 HTML을 다른 페이지에 붙여 넣어도 안전합니다.

URL도 같습니다. 링크는 상대 URL과 http, https, mailto, irc, ircs, xmpp, 이미지는 상대 URL과 http, https만 남기고, javascript:, data: 등은 href / src가 비워집니다(링크 글자는 남음). <details>, <kbd>, <br>이 동작해야 하는 문서는 GitHub 자체 미리보기에서 확인하세요.

이미지는 네트워크에서 불러옴

![alt](https://…)는 <img>가 되고, 브라우저가 그 주소에서 이미지를 내려받습니다. 이미지 서버에는 IP 주소와 브라우저 정보가 전달됩니다. 텍스트와 문서의 나머지는 브라우저 안에 남습니다.

제한 사항

• 원시 HTML은 렌더링하지 않으므로(위 참고) HTML 태그에 의존하는 문서는 GitHub와 다르게 보입니다.
• 제목에 id 앵커가 붙지 않습니다(GitHub는 페이지를 표시할 때 붙임).
• :tada: 같은 이모지 단축 코드, @멘션, #123 같은 이슈 참조는 GFM 사양 밖의 GitHub 기능이라 글자로 표시됩니다.
• 수식($…$)과 Mermaid 다이어그램은 렌더링하지 않습니다.
• 코드 블록 강조는 JavaScript, TypeScript, Python, Go, PHP, Ruby, Java, Bash, JSON, HTML/XML, CSS, Markdown을 지원하며, 그 밖의 언어는 일반 코드로 표시합니다.