utilbox
개발자 도구

Markdown → HTML 변환기

마크다운 텍스트를 HTML 코드로 즉시 변환합니다. GFM 표·코드블록·체크박스·취소선을 지원하고 코드/미리보기 탭, 헤딩 ID 자동 생성, raw HTML 살균 옵션을 제공합니다.

Markdown 입력

사용 방법

  1. 왼쪽 입력창에 마크다운을 붙여넣거나 .md 파일을 업로드합니다.
  2. 상단 옵션에서 GFM, 줄바꿈→<br>, raw HTML 이스케이프, 헤딩 ID 자동 생성을 켜고 끕니다.
  3. 오른쪽에서 코드 탭은 변환된 HTML 소스, 미리보기 탭은 렌더링 결과를 확인합니다.
  4. 복사 버튼으로 HTML을 복사하거나, .html 다운로드로 완전한 문서로 저장합니다.

Markdown → HTML 변환기 자세히 알아보기

Markdown → HTML 변환기는 마크다운으로 작성한 글을 HTML 마크업으로 옮길 때 쓰는 도구입니다. 정적 사이트 생성기를 거치지 않고 블로그 글, 이메일 뉴스레터, 강의자료, 회사 홈페이지의 정적 카드 컴포넌트에 마크다운 원고를 그대로 붙여 넣어야 할 때 가장 빠른 경로가 됩니다. 표·체크박스·취소선·자동 링크·펜스드 코드블록 같은 GFM(GitHub Flavored Markdown) 문법을 옵션 한 번으로 켜고 끌 수 있고, 변환 즉시 코드/미리보기 탭으로 결과를 확인할 수 있습니다. 내부적으로 marked 파서를 사용하며, 마크다운 안에 섞여 있는 raw HTML은 기본적으로 이스케이프(&lt;, &gt;)되어 안전한 출력만 생성합니다. 외부에서 받은 신뢰할 수 없는 마크다운을 변환할 때 XSS 위험을 줄이는 살균 모드입니다. 직접 작성한 안전한 원고라면 옵션을 꺼서 raw HTML을 그대로 통과시킬 수 있습니다. 짝 도구인 HTML → 마크다운 변환기와 함께 쓰면 양방향 마이그레이션이 가능합니다.

이럴 때 사용하세요

  • 정적 사이트의 카드/배너 영역에 마크다운으로 쓴 본문을 HTML로 바꿔 붙일 때
  • 이메일 뉴스레터 도구가 HTML만 받는 환경에서 원고를 마크다운으로 작성하고 싶을 때
  • 노션·옵시디언에서 익스포트한 마크다운을 회사 사이트나 CMS로 이식할 때
  • 강의·발표 슬라이드 툴(reveal.js 등)의 HTML 구조에 마크다운 원고를 변환해 넣을 때
  • GitHub README를 회사 홈페이지·블로그 페이지 HTML로 옮길 때

Markdown → HTML 변환기 자주 묻는 질문

GFM과 일반 마크다운은 어떻게 다른가요?
GFM(GitHub Flavored Markdown)은 GitHub가 확장한 사양으로 표(파이프 문법), 체크박스([ ]/[x]), 취소선(~~..~~), 자동 링크 인식, 코드블록 언어 표시 등을 지원합니다. GFM 옵션을 끄면 CommonMark 수준의 기본 문법만 변환됩니다.
표·체크박스는 어떻게 처리되나요?
GFM이 켜져 있을 때 파이프(|) 표는 <table><thead><tbody> 구조의 HTML 표로 변환되고, [ ] / [x] 체크박스는 <input type="checkbox" disabled>로 변환됩니다. GFM이 꺼지면 그냥 평문으로 처리됩니다.
마크다운 안에 HTML을 넣으면 어떻게 되나요?
기본 옵션(raw HTML 이스케이프 ON)에서는 < 와 > 가 &lt; / &gt;로 치환되어 화면에 글자로 표시됩니다. 안전한 원고라면 옵션을 꺼서 마크다운 안의 <div>, <span>, <iframe> 등을 그대로 출력에 포함시킬 수 있습니다. 신뢰할 수 없는 입력에는 항상 이스케이프를 켜두세요.
코드블록 syntax highlighting은 적용되나요?
이 도구는 코드블록을 <pre><code class="language-xxx">로 변환하지만 색상 강조(syntax highlighting)는 입히지 않습니다. 출력 페이지에서 highlight.js, Prism 등 강조 라이브러리를 따로 로드해서 색을 입혀야 합니다.
줄바꿈이 두 번 필요한 이유는 뭔가요?
표준 마크다운에서 단일 줄바꿈은 같은 단락의 이어진 줄로 보고 무시합니다. 단락을 나누려면 빈 줄(엔터 두 번)을 넣거나, 줄 끝에 공백 두 개를 둬야 합니다. 단일 줄바꿈도 <br>로 처리하고 싶으면 "줄바꿈 → <br>" 옵션을 켜세요.