HTML → Markdown 변환기

예시: 병합된 머리글이 있는 운행표

아래 출력은 모두 이 도구의 변환기(Turndown 7.2.4와 turndown-plugin-gfm 1.0.2의 표 규칙)로 계산한 결과입니다.

시간표처럼 머리글 한 칸이 아래 두 칸을 덮는 표는 HTML에서 colspan으로 만듭니다.

<table><thead><tr><th>노선</th><th colspan="2">운행</th></tr></thead><tbody><tr><td>서울–부산</td><td>매일</td><td>05:30</td></tr></tbody></table>

변환 결과:

| 노선 | 운행 |
| --- | --- |
| 서울–부산 | 매일 | 05:30 |

GFM 표에는 셀 병합이 없어서 colspan은 무시되고, 머리글은 2칸, 본문은 3칸이 됩니다. GFM 사양은 머리글보다 칸이 많은 행의 남는 칸을 버린다고 정하고 있어(GFM 사양, 표 확장), 이 사이트의 Markdown 미리보기에서도 05:30 칸이 보이지 않습니다. 이런 표는 변환한 뒤 머리글 행을 | 노선 | 운행 | 첫차 |처럼, 구분 행을 | --- | --- | --- |처럼 3칸으로 직접 고쳐야 합니다.

티스토리 글의 코드 블록을 옮길 때

티스토리 새 에디터 FAQ는 “마크다운 문법은 Github Flavor Markdown (GFM)을 기본으로 지원합니다”라고 안내합니다(티스토리 공지). 그런데 이미 게시된 글의 HTML을 Markdown으로 되돌리면 코드 블록의 언어 이름이 빠질 수 있습니다. 티스토리 공식 글쓰기 가이드: 마크다운 문법 페이지의 HTML을 2026-10-08에 확인해 보니, 코드 블록이 아래처럼 언어 이름을 pre의 class에 담고 있었습니다.

<pre class="markdown"><code>&gt; 인용문입니다.
&gt;
&gt; 인용문 안에서도 새로운 문단을 사용할 수 있고</code></pre>

변환 결과에는 언어 이름이 없습니다.

```
> 인용문입니다.
>
> 인용문 안에서도 새로운 문단을 사용할 수 있고
```

이 도구는 <code> 요소의 language- 클래스에서만 언어 이름을 읽기 때문입니다. 코드 내용과 줄바꿈은 그대로 남으므로, 여는 펜스 뒤에 markdown처럼 언어 이름을 직접 적어 주면 됩니다.

같은 내용을 <pre><code class="language-markdown">&gt; 인용문입니다.</code></pre>로 쓰면 다음과 같이 언어 이름이 붙습니다.

```markdown
> 인용문입니다.
```

한국어에서 굵게가 풀리는 경우

<p><strong>중요!</strong>합니다</p>는 **중요!**합니다로 변환됩니다. 이 Markdown을 이 사이트의 Markdown 미리보기(micromark와 GFM 확장)에 붙여 넣으면 굵게 표시되지 않고 **가 그대로 보입니다. CommonMark 규칙에서 닫는 **는 바로 앞이 문장 부호이면 바로 뒤가 공백이나 문장 부호여야 하는데(CommonMark 0.31.2 §6.2), 여기서는 ! 바로 뒤에 합니다가 공백 없이 붙어 있습니다. GitHub에서 확인한 결과는 마크다운 문법 정리에 정리해 두었습니다.

문장 부호를 굵게 밖으로 빼서 <p><strong>중요</strong>!합니다</p>로 바꾸면 출력은 **중요**!합니다가 되고 미리보기에서도 굵게 표시됩니다. 변환기가 이렇게 고쳐 주지는 않으므로 HTML이나 변환된 Markdown을 직접 고쳐야 합니다.

페이지 전체를 붙여 넣으면

<html><head><title>공지사항</title></head><body><h1>점검 안내</h1><p>10월 9일 02:00–04:00</p></body></html>처럼 문서 전체를 넣으면 title의 텍스트가 본문 맨 앞에 붙습니다.

공지사항

# 점검 안내

10월 9일 02:00–04:00

<style>과 <script> 안의 텍스트도 같은 방식으로 남습니다. 필요한 본문 요소만 복사해서 넣으세요.

변환 참조표

제한 사항

• 취소선(<del>, <s>), 형광펜(<mark>), 작업 목록의 체크박스는 변환하지 않고 글자만 남깁니다.
• 표의 colspan과 rowspan은 무시합니다. GFM 표에는 셀 병합이 없습니다.
• src 속성이 없는 <img>는 흔적 없이 사라집니다. 이미지를 지연 로딩하는 페이지는 화면에 보이기 전까지 주소를 data-src에 두는 경우가 많으므로, 이미지가 불러와진 뒤에 복사하거나 속성 이름을 src로 바꾼 뒤 변환하세요.
• 코드 언어 이름은 <code>의 language- 클래스에서만 읽습니다. <pre>의 클래스나 data-lang 속성에 있는 언어 이름은 쓰이지 않습니다.
• 상대 경로 링크와 이미지는 그대로 남고, 게시한 페이지의 주소를 기준으로 해석됩니다.
• 입력이 1,048,576자를 넘으면 “입력이 매우 크면 변환이 느릴 수 있습니다.”가 표시되지만 변환은 페이지 안에서 계속됩니다.
• 이 사이트의 Markdown 미리보기는 원시 HTML을 글자로 보여 줍니다. 표 셀 안의 <br>이나 HTML로 남은 표는 미리보기에서 태그가 그대로 보입니다.