마크다운 미리보기 · HTML 변환

README나 블로그 글을 올리기 전에 모양을 확인하고, 필요하면 변환된 HTML을 복사해 다른 곳에 붙여 넣습니다. 기본 문법 위주의 가벼운 변환기라서 표나 각주 같은 확장 문법은 지원하지 않습니다.

마크다운 미리보기 · HTML 변환모두의계산기

지원하는 문법

제목(#~######), 굵게(**, __), 기울임(*, _), 취소선(~~), 인라인 코드(백틱), 코드 블록(백틱 세 개, 언어 표기는 class로 붙음), 링크 [텍스트](주소), 비순서 목록(-, *, +), 순서 목록(1.), 인용(>), 수평선(---), 문단(빈 줄로 구분)을 처리합니다. 이미지는 파일을 불러오지 않고 [이미지: 대체 텍스트]로만 표시합니다. 표, 각주, 작업 목록(- [ ]), 중첩 목록, HTML 태그 직접 삽입은 지원하지 않습니다. 변환은 브라우저에서만 이루어집니다.

방언(dialect) 차이

마크다운은 원저자의 느슨한 규칙에서 출발해 CommonMark, GitHub Flavored Markdown(GFM), 여러 블로그 플랫폼의 변형이 따로 있습니다. 대표적인 차이는 줄바꿈입니다. 원래 규칙과 CommonMark에서는 한 번의 줄바꿈은 무시되고 줄 끝에 공백 두 개가 있어야 <br>가 되지만, GitHub 댓글·이슈나 노션·디스코드에서는 한 번의 줄바꿈이 그대로 줄바꿈입니다. 이 도구는 옵션으로 둘 다 고를 수 있으니 올릴 곳의 방식에 맞춰 확인하세요. 표와 취소선은 GFM 확장이고, 밑줄 하나로 기울임을 만드는 _는 단어 중간(snake_case)에서 어떻게 처리하느냐가 구현마다 다릅니다.

보안: 왜 HTML 태그가 그대로 나오지 않는가

입력 전체를 먼저 HTML 이스케이프(<&lt;)한 다음 마크다운 규칙을 적용합니다. 그래서 본문에 <script><img onerror=…>를 넣어도 글자로만 보입니다. 링크 주소도 javascript: 같은 스킴은 버리고 http·https·mailto·상대 경로만 허용합니다. 이 순서(이스케이프 → 변환)는 직접 마크다운 렌더러를 만들 때도 지켜야 하는 기본입니다. 반대로 말하면 마크다운 안에 HTML을 섞어 쓰는 문서는 이 도구에서 의도대로 나오지 않습니다.

HTML 소스의 용도

변환된 HTML은 시맨틱 태그만 있고 스타일은 붙지 않습니다. 이메일 본문, CMS의 HTML 편집 모드, 정적 사이트에 붙일 때는 그쪽 CSS가 적용됩니다. 미리보기에 보이는 모양은 이 페이지의 임시 스타일이므로 최종 모습과는 다를 수 있습니다.

자주 묻는 질문

표가 안 나와요.

표는 GFM 확장 문법이라 지원하지 않습니다. 기본 문법 확인용으로 쓰고 표는 올릴 플랫폼에서 직접 확인하세요.

줄바꿈이 무시돼요 / 너무 많이 생겨요.

"한 번의 줄바꿈도 br로" 옵션을 바꿔 보세요. 플랫폼마다 규칙이 다릅니다. 문단을 나누려면 빈 줄을 한 줄 넣는 것이 모든 방언에서 통합니다.

이미지가 표시되지 않아요.

외부 이미지를 불러오지 않도록 일부러 텍스트로만 표시합니다. HTML 소스에도 img 태그는 들어가지 않습니다.

함께 보기