Markdown → HTML 변환이란?
Markdown to HTML은 Markdown 콘텐츠를 실시간으로 올바르게 구조화된 HTML로 변환합니다. 테이블, 코드 블록, 작업 목록을 포함한 전체 CommonMark 구문을 지원하므로 콘텐츠를 미리 보거나 CMS용 HTML을 생성할 수 있습니다.
변환에는 marked 파서와 GitHub Flavored Markdown 확장이 쓰여, 표, 펜스 코드 블록, 작업 목록, 자동 링크가 GitHub README와 동일하게 렌더링됩니다. 입력하는 동안 미리보기가 업데이트되고, 소스 보기는 복사할 때 받게 될 정확한 HTML을 보여 줍니다. h1~h6, ul/ol, pre/code, img 같은 시맨틱 태그뿐이며 인라인 스타일은 포함하지 않습니다. ‘압축’을 켜면 한 줄짜리 간결한 출력이 되고, 내려받기는 전체를 독립 .html 문서로, 템플릿을 설정하면 그 템플릿으로 감쌉니다.
사용 방법
- 편집기에 Markdown 콘텐츠를 입력하거나 붙여넣으세요 — 제목, 목록, 링크, 이미지, 코드 블록, 테이블 모두 지원됩니다.
- 렌더링된 HTML 미리보기가 실시간으로 업데이트되며, 미리보기 모드와 HTML 소스 보기를 전환할 수 있습니다.
- 깔끔한 HTML 출력을 복사하거나 .html 파일로 다운로드하여 웹사이트나 CMS에 바로 사용하세요.
사용 시기
- Markdown으로 글을 쓴 뒤 .md를 받지 않는 CMS에 깔끔한 HTML로 붙여 넣을 때.
- 프로젝트 README를 HTML로 옮겨 문서 사이트나 랜딩 페이지에 올릴 때.
- 발행 전에 각주나 작업 목록처럼 익숙하지 않은 Markdown 구문이 어떻게 보이는지 확인할 때.
결과
Markdown으로 기술 튜토리얼을 작성했는데 HTML만 지원하는 CMS에 입력해야 합니다. 여기서 변환하면 올바른 제목 계층 구조와 코드 하이라이트 마크업을 갖춘 깔끔한 시맨틱 HTML을 얻을 수 있습니다.
자주 묻는 질문
- 어떤 Markdown 방언을 지원하나요?
- CommonMark 위에 GitHub Flavored Markdown(GFM)을 얹은 사양입니다. 파이프 표, 언어 지정 펜스 코드, ~~취소선~~, [x]/[ ] 작업 목록, 그리고 URL의 자동 링크화를 포함합니다.
- 출력 HTML에 인라인 CSS나 클래스가 들어가나요?
- 들어가지 않습니다. 출력은 h1, h2, p, ul, pre, code, img 같은 순수 시맨틱 HTML입니다. 사이트의 CSS를 직접 적용하면 프레임워크 기본 스타일과 충돌 없이 타이포그래피를 통일할 수 있습니다.
- 코드 블록에 문법 강조가 자동으로 들어가나요?
- 코드는 <pre><code class="language-xxx">로 감싸 출력되므로, Prism이나 highlight.js 같은 하이라이터가 페이지에서 색을 입혀 줍니다. 변환 자체는 어떤 색상도 포함하지 않습니다.
- Markdown 안에 직접 쓴 HTML 태그는 어떻게 처리되나요?
- 그대로 통과합니다. 동영상 임베드나 접이식 블록처럼 Markdown 문법으로 다루기 어려운 요소는 <div>, <iframe>, <details>를 본문에 섞어 써도 됩니다.
- 여기서 HTML을 다시 Markdown으로 바꿀 수도 있나요?
- 이 도구는 Markdown→HTML만 지원합니다. 반대 방향은 별도의 HTML→Markdown 변환기를 찾으세요. HTML이 담은 스타일과 레이아웃을 Markdown이 그대로 표현하지 못하기 때문에 작업 흐름이 다릅니다.