마크다운 → HTML 미리보기

마크다운에는 표준이 하나가 아닙니다

"GitHub에서는 됐는데 여기선 안 된다"는 일이 흔한 이유입니다. 마크다운은 2004년 원본 명세가 애매하게 쓰인 탓에 구현마다 방언이 갈렸고, 나중에 CommonMark가 정리했지만 표·체크박스 같은 인기 기능은 GitHub 확장(GFM)이라 CommonMark 표준에는 없습니다.

이 도구가 지원하는 것과 안 하는 것

오른쪽 위 "HTML 소스" 탭으로 바꾸면 렌더 결과 대신 생성된 HTML을 볼 수 있고, "HTML 저장"을 누르면 기본 스타일이 들어간 완결된 HTML 파일 하나로 내려받습니다. 첨부해서 보내면 상대가 마크다운을 몰라도 그냥 열립니다.

• 지원 — 제목(H1~H6), 굵게·기울임·취소선, 인라인 코드와 코드 펜스(언어 지정 가능), 순서 있는/없는 목록과 들여쓰기 중첩, 체크박스 목록, 인용문(중첩 가능), 표(:-- ·--: · :--: 정렬), 링크·이미지, 자동 링크, 가로 구분선, 역슬래시 이스케이프.
• 미지원 — 각주, 정의 목록, 수식(LaTeX), mermaid 다이어그램, 이미지 크기 지정, 목차 자동 생성.
• 의도적 차단 — HTML 태그 삽입. br 이나 details 태그를 넣으면 태그가 아니라 글자로 표시됩니다.

HTML 삽입이 왜 위험한가

GitHub이 HTML을 일부 허용하는 것과, 아무 렌더러나 HTML을 통과시키는 것은 전혀 다른 얘기입니다. 마크다운 렌더러가 HTML을 그대로 내보내면 그 자리가 XSS 통로가 됩니다. 남이 쓴 글을 렌더링해 다른 사용자에게 보여 주는 서비스라면 특히 그렇습니다.

이 도구는 본문을 전부 문자로 이스케이프한 다음 마크다운 문법만 태그로 되살립니다. 그래서 스크립트가 든 마크다운을 붙여넣어도 실행되지 않습니다. 추가로 링크·이미지 주소의 스킴을 검사합니다.

• javascript: · vbscript: 링크 → 차단하고 "(차단된 링크)"로 표시합니다.
• 이미지 주소는 http·https와 래스터 data:image(png·jpeg·gif·webp·avif)만 허용합니다.
• data:image/svg+xml 은 차단합니다. SVG는 내부에 스크립트를 품을 수 있기 때문입니다.
• 주소 안에 탭·제어문자를 끼워 넣는 우회도 그 문자들을 제거한 뒤 검사해 걸러냅니다.

마크다운으로 글을 쓰면 뭐가 좋나

• 텍스트라 버전 관리가 됩니다. git diff로 어느 문장이 바뀌었는지 줄 단위로 보입니다. 워드 파일은 통째로 바뀐 것으로 나옵니다.
• 에디터에 종속되지 않습니다. 회사를 옮기거나 위키를 갈아타도 .md 파일은 그대로 살아 있습니다. 노션·컨플루언스는 대개 마크다운 내보내기를 지원합니다.
• 위지윅에서 워드나 웹페이지를 붙여넣을 때 따라 들어오는 스타일 오염이 없습니다. 국내 회사 문서에서 가장 자주 겪는 그 문제입니다.
• 검색·치환이 쉽습니다. grep 한 줄로 전체 문서에서 특정 표기를 찾아 고칠 수 있습니다.
• AI 도구와 궁합이 좋습니다. 대부분의 LLM이 마크다운으로 답하므로 그대로 붙여넣어 결과를 확인할 수 있습니다.

자주 걸리는 함정