마크다운 미리보기·HTML 변환·문법 가이드

마크다운 미리보기·HTML 상호 변환·문법 가이드

여기에 렌더링된 결과가 표시됩니다.

마크다운 미리보기·HTML 변환·문법 가이드 소개

마크다운에는 하나의 표준이 없습니다. 2004년 원조 문법은 모호한 부분이 많아 파서마다 결과가 달랐고, 이를 정리한 것이 CommonMark 명세이며, GitHub는 여기에 표·체크박스·취소선 등을 더한 GFM(GitHub Flavored Markdown)을 씁니다. 이 도구는 CommonMark와 GFM을 따르는 오픈소스 파서 marked로 변환하고, 보안을 위해 원시 HTML만 다르게 처리합니다. 무엇이 같고 무엇이 다른지 알아 두면 GitHub나 블로그에 올렸을 때 모양이 달라지는 일을 줄일 수 있습니다.

이 페이지에는 세 가지 모드가 있습니다. 실시간 미리보기, 마크다운과 HTML을 양방향으로 바꾸는 변환기, 문법 항목마다 원문과 렌더 결과를 나란히 보여 주는 문법 가이드입니다.

원시 HTML은 실행되지 않고 글자로 나온다

CommonMark 명세는 원시 HTML을 그대로 통과시키도록 되어 있고, 보안 처리는 렌더러를 쓰는 쪽에 맡깁니다. GFM은 여기에 「허용하지 않는 원시 HTML」 확장을 두어 script, style, iframe, textarea, title 같은 몇몇 태그의 여는 꺾쇠를 무력화합니다.

이 도구는 더 보수적입니다. 파서가 원시 HTML로 읽은 부분을 모두 < >로 이스케이프하기 때문에 <script>alert(1)</script>는 실행되지 않고 문단 안의 글자로 보입니다. 대신 <details>나 <kbd>처럼 GitHub에서는 되는 무해한 태그도 글자로 나옵니다. 링크와 이미지 주소는 스킴을 검사해서 javascript:, vbscript: 같은 실행형 주소를 #으로 바꿉니다.

지원하는 문법과 명세와 다른 부분

CommonMark 문법 전체(ATX·Setext 제목, 강조의 flanking 규칙, 줄 끝 공백 두 칸이나 역슬래시 강제 줄바꿈, 「5.」·「3)」 번호 목록과 시작 번호, 들여쓰기 4칸 코드, 참조 링크, 역슬래시 이스케이프)와 GFM 확장(표와 :--: 정렬, ~~취소선~~, - [ ] 체크박스, www. 자동 링크)을 지원합니다. 그래서 snake_case_name 같은 단어 안의 밑줄은 기울임이 되지 않고, 괄호가 든 주소(…/Foo_(bar))도 끝까지 링크가 됩니다. 명세와 다른 부분은 아래와 같습니다.

원시 HTML: <details>, <kbd>,  같은 태그는 실행하지도 숨기지도 않고 글자로 보여 줍니다(위 절 참고).
각주([^1]), 정의 목록, :smile: 같은 이모지 코드, 제목 앵커 id는 GFM 명세 밖의 확장이라 만들지 않습니다.
링크 주소의 한글·공백은 CommonMark 참조 구현처럼 %ED%95%9C 같은 퍼센트 인코딩으로 바뀝니다. 브라우저에서 여는 주소는 같습니다.

변환기 모드: 마크다운 ↔ HTML

마크다운 → HTML은 미리보기와 같은 렌더러를 씁니다. 그래서 취소선, 체크박스, 표 칸 안의 \|까지 미리보기와 똑같은 HTML이 나오고, 블록 태그 사이에는 읽기 쉽게 줄바꿈이 들어갑니다.

HTML → 마크다운은 제목, 문단, 굵게·기울임, 링크, 이미지, 목록(중첩 포함), 인용, 코드 블록, 표, <br>, <hr>을 되돌립니다. <del>은 ~~취소선~~으로, 체크박스는 [x]·[ ]로 돌아옵니다. script와 style은 내용째 지우고, 그 밖의 모르는 태그는 태그만 벗기고 글자는 남깁니다. div·section 같은 블록 태그는 앞뒤에 빈 줄을 넣어, 바로 앞 목록의 마지막 항목에 글자가 붙지 않게 합니다. 속성(class, onclick 등)은 모두 사라지므로, 웹페이지 일부를 긁어 와 문서로 옮길 때 쓰기 좋습니다.

문법 가이드 모드

제목, 문단과 줄바꿈, 강조, 목록, 링크와 이미지, 코드, 인용·구분선·표, 이스케이프와 인라인 HTML까지 항목별로 원문과 결과를 보여 줍니다. 결과는 명세대로의 HTML이며, 대부분 미리보기와 같습니다. 각주, 정의 목록, 이모지 코드, 제목 id, 인라인 HTML, 주석처럼 이 도구가 만들지 않는 문법은 GitHub 같은 곳에서 나오는 결과를 따로 적어 보여 줍니다. 그래서 이 항목들은 가이드와 미리보기 결과가 다릅니다.

예시

보안 처리 확인

입력: <script>alert(1)</script> [눌러 보세요](javascript:alert(1))
결과: <p><script>alert(1)</script></p> <p><a href=「#」 rel=「noopener noreferrer」>눌러 보세요</a></p>

태그는 글자로 이스케이프되고, javascript: 링크는 #으로 바뀝니다. 주소 안의 괄호는 짝이 맞으면 주소의 일부로 읽힙니다.

밑줄이 든 변수명

입력: snake_case_name and file_name_here
결과: <p>snake_case_name and file_name_here</p>

단어 안의 밑줄은 강조를 열거나 닫지 못한다는 CommonMark 규칙대로 글자 그대로 나옵니다. 별표(*)는 단어 안에서도 강조가 되므로 foo*bar*baz의 bar는 기울어집니다.

HTML을 마크다운으로

입력: <h2>Hi</h2><p>A <strong>b</strong> <a href=「/x」>l</a></p><ul><li>one<ul><li>two</li></ul></li></ul>
결과: ## Hi A **b** [l](/x) - one - two

중첩 목록은 두 칸 들여쓰기로 되돌아옵니다.

사용 방법

탭에서 미리보기, 변환기, 문법 가이드 중 하나를 고릅니다.
왼쪽에 마크다운(또는 HTML)을 입력하면 오른쪽 결과가 바로 바뀝니다.
결과 HTML이나 마크다운을 복사합니다.

자주 묻는 질문

GitHub에서는 줄이 바뀌는데 여기서는 한 줄로 붙어요.

GitHub의 이슈·댓글은 줄바꿈을 그대로 살리지만 README 같은 문서 파일과 CommonMark는 빈 줄로 문단을 나눕니다. 이 도구도 명세대로 동작하므로, 같은 문단 안에서 줄을 바꾸려면 줄 끝에 공백 두 칸이나 역슬래시(\)를 붙이고, 문단을 나누려면 빈 줄을 넣으세요.

HTML 태그를 섞어 쓸 수 있나요?

이 도구에서는 모든 태그가 글자로 표시됩니다. 입력을 그대로 페이지에 넣어도 스크립트가 실행되지 않도록 한 설계입니다.

코드 블록에 문법 강조 색이 들어가나요?

```js처럼 언어 이름을 쓰면 class=「language-js」가 붙은 <pre><code>가 나옵니다. 색칠은 Prism, highlight.js 같은 강조 라이브러리가 이 클래스를 보고 합니다.

표 칸 안에 | 문자를 넣으려면?

\|로 이스케이프합니다. 미리보기와 변환기 모두 글자 |로 처리합니다.

출처

기준일: 2026-09-23

개인정보와 저장 방식