이 변환기가 하는 일
HTML은 웹 페이지를 만드는 언어이고, Markdown은 같은 구조를 일반 문자로 더 가볍게 쓰는 방법입니다. 제목은 #, 목록 항목은 -, 굵은 글씨는 **로 씁니다. 두 형식 사이의 변환은 생각보다 자주 필요합니다. CMS의 블로그 글을 정적 사이트로 옮기거나, 웹 페이지 내용을 README에 붙여넣거나, Markdown으로 쓴 메모를 이메일 템플릿용 HTML로 바꿀 때가 그렇습니다. 이 HTML 마크다운 변환기는 그런 작업을 한 화면에서 처리합니다.
변환은 양방향으로 됩니다. HTML을 Markdown으로 바꿀 때는 널리 쓰이는 Turndown에 표와 코드 블록 규칙을 더해 사용합니다. Markdown을 HTML로 바꿀 때는 GitHub Flavored Markdown을 켠 marked를 사용합니다.
사용 방법
- HTML → 마크다운 또는 마크다운 → HTML로 방향을 고릅니다.
- 왼쪽 입력란에 붙여넣거나, 파일 열기를 누르거나, 예시로 먼저 시험해 봅니다. 입력하는 동안 결과가 바로 갱신됩니다.
- HTML을 Markdown으로 바꿀 때는 제목 스타일(# 기호 또는 밑줄식), 글머리 기호 문자, 코드 블록 작성 방식(펜스 또는 들여쓰기)을 고릅니다.
- Markdown을 HTML로 바꿀 때 GitHub 댓글처럼 한 번의 줄바꿈도 줄바꿈으로 남기려면 줄바꿈을
<br>로를 켭니다. - 코드와 미리보기를 오가며 렌더링 결과를 확인한 뒤 복사하거나 다운로드합니다.
HTML을 Markdown으로 바꾼 예시
이 HTML은
<h1>Release notes</h1>
<p>Version <strong>2.4</strong> adds <a href="https://example.com/docs">offline mode</a> and fixes <em>three</em> bugs.</p>
<ul>
<li>Faster search</li>
<li>New <code>--quiet</code> flag</li>
</ul>
<pre><code class="language-bash">npm install [email protected]</code></pre>
<table>
<tr><th>Platform</th><th>Status</th></tr>
<tr><td>Windows</td><td>Ready</td></tr>
</table>다음 Markdown이 됩니다.
# Release notes
Version **2.4** adds [offline mode](https://example.com/docs) and fixes *three* bugs.
- Faster search
- New `--quiet` flag
```bash
npm install [email protected]
```
| Platform | Status |
| --- | --- |
| Windows | Ready |코드 블록의 language-bash class는 여는 펜스 뒤의 언어 태그로 바뀌므로 GitHub와 대부분의 정적 사이트 생성기에서 구문 강조가 그대로 동작합니다. 중첩 목록은 상위 항목 아래로 들여쓰기되고, 번호 목록은 번호를 유지합니다.
Markdown을 HTML로 바꾼 예시
이 Markdown은
## Install
Run `npm install` and open **http://localhost:3000**.
- [x] Node 20
- [ ] Docker다음 HTML이 됩니다.
<h2>Install</h2>
<p>Run <code>npm install</code> and open <strong><a href="http://localhost:3000">http://localhost:3000</a></strong>.</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> Node 20</li>
<li><input disabled="" type="checkbox"> Docker</li>
</ul>여기서는 GitHub 확장 문법 두 가지가 작동했습니다. 그냥 적어 둔 URL이 링크가 되었고, 체크리스트 항목이 체크박스가 되었습니다. 구분 행에 :-:가 있는 표는 셀에 align="center"가 붙습니다.
기본 설정에서는 문단 안의 한 번 줄바꿈이 소스에서 그냥 줄바꿈으로 남고, 브라우저는 이를 공백으로 보여 줍니다. 줄바꿈을 <br>로를 켜면 서로 다른 줄에 쓴 Line one과 Line two가 <p>Line one<br>Line two</p>가 됩니다.
변환 과정에서 빠지는 것
Markdown은 디자인이 아니라 구조를 기술합니다. HTML을 Markdown으로 바꿀 때는 다음이 빠집니다.
script,style,noscript,template블록은 제거됩니다.- class, id, 인라인 스타일, data 속성은 빠집니다.
div,span같은 감싸는 요소는 사라지지만 안의 텍스트는 남습니다.- Markdown 표의 한 행은 한 줄에 들어가야 하므로, 여러 문단이 든 표 셀은 한 줄로 합쳐집니다. 셀 안의 파이프 문자는
\|로 이스케이프됩니다. - 병합된 셀(colspan)은 빈 셀로 채워서 모든 행의 열 수를 맞춥니다.
정확한 레이아웃이 필요하다면 해당 내용은 HTML로 두세요. 대부분의 Markdown 렌더러는 원시 HTML 블록을 허용합니다.
팁
- 가능하면 렌더링된 화면이 아니라 페이지 소스에서 복사하세요. 화면의 텍스트를 복사하면 변환에 필요한 태그가 사라집니다.
- HTML이 압축되어 있거나 지저분해도 결과는 같습니다. 변환기는 공백이 아니라 구조를 읽기 때문입니다. HTML 자체를 읽어 보고 싶다면 먼저 HTML 포매터로 정리하세요.
- 변환한 Markdown을 마크다운 포매터에 넣으면 표 정렬과 강조 표기가 한 가지 스타일로 맞춰집니다.
- Word 문서라면
.docx파일을 직접 읽는 워드 마크다운 변환기를 쓰세요.
다른 변환 방법
- Pandoc은 명령줄에서 수십 가지 형식 사이를 변환합니다. 기본 형태는
pandoc page.html -o page.md입니다. - 에디터: VS Code에서는 Ctrl+Shift+V로 Markdown 미리보기를 볼 수 있습니다. HTML을 Markdown으로 붙여넣는 명령을 추가하는 확장도 여럿 있습니다.
- 코드: 자바스크립트의 Turndown 라이브러리, Python의 markdownify 패키지로 직접 작성한 스크립트 안에서 HTML을 Markdown으로 바꿀 수 있습니다.
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 붙여넣은 HTML은 비활성 문서로 파싱되므로, 변환하는 동안 그 안의 어떤 코드도 실행되거나 로드되지 않습니다.