Markdown to HTML 변환기

Markdown to HTML 변환기 사용법

1. 좌측 입력창에 변환할 Markdown 텍스트를 작성하거나 붙여넣기 합니다.
2. 도구가 자동으로 CommonMark와 GFM 표준에 따라 Markdown을 파싱합니다.
3. 우측 출력창에서 변환된 HTML5 코드를 확인합니다. 여기에는 <h1>~<h6>, <strong>, <em>, <pre><code>, <table> 등 시맨틱 태그가 포함됩니다.
4. 필요에 따라 출력 HTML을 복사하여 웹 페이지, 블로그, 문서 등에 붙여넣습니다.

작동 원리

이 변환기는 marked 라이브러리를 기반으로 하며, CommonMark 사양과 GitHub Flavored Markdown 확장을 모두 지원합니다. Markdown 텍스트를 토큰화하고 AST(Abstract Syntax Tree)로 변환한 뒤, 대응하는 HTML5 시맨틱 태그로 렌더링합니다. 예를 들어, ### 제목은 <h3> 태그로 변환되고, 코드 블록은 <pre><code> 태그로 감싸집니다. 모든 변환 과정은 JavaScript로 브라우저 내에서 실행되어 서버로 데이터가 전송되지 않습니다.

예제

# 제목 1

**굵은 글씨**와 *기울임 글씨*를 지원합니다.

```javascript
console.log('Hello, world!');
```

| 번호 | 항목 |
|------|------|
| 1    | 예제 |

- [x] 작업 완료
- [ ] 작업 예정

> 인용문 예시

---

<h1>제목 1</h1>
<p><strong>굵은 글씨</strong>와 <em>기울임 글씨</em>를 지원합니다.</p>
<pre><code class="language-javascript">
console.log('Hello, world!');
</code></pre>
<table>
<thead>
<tr><th>번호</th><th>항목</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>예제</td></tr>
</tbody>
</table>
<ul>
<li><input type="checkbox" checked disabled> 작업 완료</li>
<li><input type="checkbox" disabled> 작업 예정</li>
</ul>
<blockquote>인용문 예시</blockquote>
<hr>

언제 사용하나요?

• 개발자가 README 파일이나 문서 작성 시 Markdown을 HTML로 변환할 때
• 디자이너가 Markdown 콘텐츠를 웹 페이지에 시맨틱하게 삽입하고자 할 때
• SEO 전문가가 검색 엔진 최적화를 위해 구조화된 HTML을 생성할 때
• 학생이 Markdown으로 작성한 보고서를 HTML 형식으로 제출해야 할 때

이 도구는 html-to-markdown 도구와 같이 HTML과 Markdown 간 변환을 반복할 때 유용하며, html-minifier와 함께 사용해 최적화된 HTML을 얻을 수 있습니다.