마크다운 HTML 변환

브라우저 안에서만 처리됩니다. 입력한 내용과 선택한 파일은 서버로 전송되지 않습니다.

변환기를 불러오는 중입니다…

미리보기

마크다운을 입력하면 여기에 그려집니다.

HTML

살균을 마친 HTML 입니다. 아래 목록에 없는 태그·속성은 들어 있지 않습니다.

 

살균 정책

마크다운은 설계상 HTML 을 그대로 통과시킵니다. 그 결과를 이 페이지에 그리면 남의 코드가 이 사이트와 같은 출처에서 도는 셈이라, 허용 목록 방식으로 걸러냅니다 — 아래 적힌 것만 남기고 나머지는 전부 지웁니다.

남기는 태그 (56개)
p br hr h1 h2 h3 h4 h5 h6 div span strong b em i del s ins u mark small sub sup abbr cite q kbd samp var time code pre blockquote ul ol li dl dt dd table thead tbody tfoot tr th td caption colgroup col a img figure figcaption details summary input
반드시 지우는 것
script style iframe object embed form button select textarea link meta base svg math template noscript marquee audio video
속성
on 으로 시작하는 이벤트 처리기(onerror·onclick …)와 style·id·name·formaction·srcset·data-* 는 전부 지웁니다.
주소(href · src)
http: · https: · mailto: · tel: 와 상대 주소만 남깁니다. javascript:·data:·vbscript:·blob: 등은 지웁니다. data: 는 이미지라도 지웁니다 — 화면에서는 안전하지만 결과를 복사해 다른 곳에 붙이는 순간 그 보장이 사라지기 때문입니다.
script · style
태그만 벗기는 게 아니라 안의 내용까지 지웁니다.

사용법

  1. 마크다운을 붙여넣으면 미리보기와 HTML 이 바로 나옵니다. 제목, 목록, 표, 코드 블록, 취소선, 할 일 목록(GitHub 방식)을 지원합니다.
  2. "HTML 복사"로 받은 결과는 이미 살균을 마친 것이라 그대로 붙여 써도 됩니다. 무엇이 남고 무엇이 지워지는지는 아래 "살균 정책" 칸에 그대로 적혀 있습니다.
  3. "HTML → 마크다운"으로 바꾸면 웹페이지나 메일 본문을 붙여넣어 마크다운으로 되돌릴 수 있습니다.

자주 묻는 질문

어떤 마크다운 문법을 지원하나요?

CommonMark 에 GitHub 확장(GFM)을 더한 범위입니다. 제목, 목록, 인용, 코드 블록과 인라인 코드, 링크, 이미지, 표, 취소선, 자동 링크, 할 일 목록(- [x])이 됩니다. 각주나 수식처럼 GitHub 에도 확장으로만 있는 문법은 지원하지 않습니다. 변환에는 marked(MIT 라이선스)를 씁니다.

마크다운 안에 HTML 을 써도 되나요?

쓸 수 있지만 그대로 나가지는 않습니다. 마크다운은 설계상 HTML 을 통과시키는데, 그 결과를 이 페이지에 그리면 남의 코드가 이 사이트와 같은 출처에서 도는 셈이 됩니다. 그래서 허용 목록 방식으로 걸러냅니다 — 정해 둔 태그·속성만 남기고 나머지는 전부 지웁니다. script·style 은 태그만 벗기는 게 아니라 안의 내용까지 지우고, on 으로 시작하는 이벤트 처리기 속성과 javascript: · data: 주소도 지웁니다. 지운 것이 있으면 화면 위에 무엇을 몇 개 지웠는지 표시합니다.

data: 로 넣은 이미지는 왜 지우나요?

화면에 그리는 동안만 보면 img 태그의 data: 이미지는 스크립트를 실행하지 못합니다. 하지만 이 도구의 결과는 복사해서 다른 곳에 붙이라고 만든 것이고, 붙여 넣는 곳이 그 주소를 링크로 열거나 다른 태그에 넣으면 그 보장이 사라집니다. 그래서 결과에 남기지 않고, 남기지 않는다고 화면에 적어 둡니다. 이미지를 넣어야 한다면 파일로 올린 뒤 http/https 주소로 참조하세요.

HTML 을 마크다운으로 되돌릴 때 무엇이 사라지나요?

마크다운에 대응하는 문법이 없는 것은 전부 사라집니다. 글자 색·크기·정렬 같은 서식(style 속성), 클래스와 아이디, 표의 셀 병합(colspan·rowspan), 표 안의 여러 줄, 중첩된 표, 폼과 입력 칸, 동영상·오디오, iframe 이 여기 해당합니다. script·style·iframe·form 은 살균 단계에서 아예 지워지므로 마크다운에도 남지 않습니다. 표는 GitHub 방식으로 되돌리고, 대응이 없는 인라인 태그는 글자만 남습니다. 변환에는 turndown(MIT 라이선스)을 씁니다.

줄바꿈이 미리보기에서 사라집니다.

마크다운은 원래 줄바꿈 하나를 무시하고 빈 줄이 있어야 문단을 나눕니다. GitHub 의 댓글·이슈 칸만 예외적으로 줄바꿈 하나를 <br> 로 봅니다. 그 동작이 필요하면 "줄바꿈 하나를 <br> 로" 를 켜세요. README 같은 파일에 넣을 것이라면 꺼 두는 편이 GitHub 에서 보이는 모습과 같습니다.

변환기가 서버에서 도나요?

아니요. 마크다운 변환기·살균기·역변환기까지 전부 브라우저 안에서 실행됩니다. 입력한 내용은 서버로 가지 않고 어디에도 저장되지 않으며, 페이지를 닫으면 사라집니다. 변환기는 이 페이지를 열 때만 내려받도록 따로 떼어 두었습니다 — 다른 도구를 보러 온 사람은 받지 않습니다.

코드 블록에 색이 안 입혀집니다.

문법 강조는 넣지 않았습니다. 강조 라이브러리는 언어마다 규칙을 들고 있어 용량이 크게 늘어나는데, 이 도구의 목적은 "마크다운이 어떤 HTML 이 되는지"를 보여주는 것이라 그 값이 비용을 넘지 않는다고 봤습니다. 코드 블록에 적은 언어 이름은 class="language-…" 로 결과 HTML 에 그대로 남으므로, 붙여 넣는 곳에서 강조기를 붙이면 그대로 동작합니다.