📑 Markdown 미리보기
Markdown을 붙여넣으면 실시간 HTML 미리보기. GitHub 스타일 렌더링 및 코드 강조.
📚 지원되는 문법
📖 자주 걸리는 지점
Markdown 을 붙여 넣으면 실시간으로 HTML 을 렌더링하고 변환된 HTML 을 그대로 복사할 수 있습니다. GitHub Flavored Markdown 의 주요 표기와 코드 하이라이트에 대응합니다. 처리는 브라우저 안에서 끝납니다. Markdown 에는 유일한 사양이 없습니다 — CommonMark · GFM · Qiita · Zenn · Notion · Slack 은 각각 다른 방언이며 여기서의 모습이 붙여 넣는 곳에서의 모습을 보장하지 않습니다.
| 사례 | 무슨 일이 일어나는가 | 어떻게 하면 되는가 |
|---|---|---|
| 붙여 넣는 곳에서 줄바꿈이나 목록이 깨진다 | 방언에 따른 차이가 가장 크게 나오는 것이 줄바꿈의 취급입니다. GFM 은 단순한 줄바꿈을 그대로 <br> 로 만들지만 CommonMark 는 줄바꿈을 무시하고 하나의 단락으로 잇습니다 — 같은 텍스트가 한쪽에서는 3 줄, 다른 쪽에서는 1 줄이 됩니다. 목록의 중첩도 들여쓰기 폭이 2 스페이스인지 4 스페이스인지로 해석이 달라져 2 스페이스로 쓴 중첩이 평평한 목록이 되거나 반대로 코드 블록으로 해석되기도 합니다. Slack 에 이르러서는 제목도 테이블도 해석하지 않습니다. |
블록의 앞뒤에 반드시 빈 줄을 넣으세요. 제목 · 목록 · 테이블 · 코드 블록 앞에 빈 줄이 있는 것만으로 방언에 따른 해석의 흔들림 대부분이 사라집니다. 단락을 나누고 싶을 때도 줄바꿈 하나가 아니라 빈 줄을 쓰세요 — 이는 어느 방언에서나 확실히 단락으로 다뤄집니다. 목록의 들여쓰기는 4 스페이스(또는 탭)로 통일하는 것이 가장 안전합니다. 깨지는 원인을 못 찾겠다면 전각 스페이스를 의심하세요 — 일본어 입력 상태로 행 앞에 들어간 전각 공백은 화면상으로는 전혀 구분이 되지 않고 들여쓰기로도 인식되지 않으므로 목록이 깨지는 원인의 상위에 옵니다. |
| HTML 태그가 그대로 통과한다 | Markdown 의 사양에서는 생 HTML 을 써도 되는 것으로 되어 있습니다 — <div> 도 <script> 도 변환기는 그대로 출력에 통과시킵니다. 이 페이지는 당신 자신이 입력한 내용을 표시할 뿐이므로 무해화하지 않지만 이 동작을 이해하지 못한 채 같은 구조를 서비스에 넣으면 그대로 XSS 가 됩니다. Markdown 이니까 안전하다는 오해는 뿌리 깊고 사용자가 댓글에 <img src=x onerror=...> 라고 쓰면 변환된 HTML 에서 그대로 실행됩니다. |
사용자가 쓴 Markdown 을 표시할 거라면 변환된 HTML 을 반드시 새니타이즈하세요 — DOMPurify.sanitize(marked.parse(input)) 의 순서입니다. 라이브러리 쪽의 sanitize 옵션에 기대지 마세요 — marked 의 그것은 비권장을 거쳐 이미 삭제되었습니다. 순서를 틀려 새니타이즈한 뒤 변환 하면 의미가 없습니다(이스케이프된 문자열을 Markdown 이 복원해 버리므로). 서버 쪽에서도 같은 처리를 통과시킬 필요가 있습니다 — 브라우저 쪽만의 새니타이즈는 API 를 직접 두드리면 그냥 통과입니다. |
| 테이블이 표가 되지 않는다 | 테이블은 표준 Markdown 에는 없는 확장 표기로 GFM 에서 추가된 것입니다. 따라서 대응하지 않는 환경에서는 파이프 기호가 그대로 늘어선 하나의 단락으로 표시됩니다. 대응하는 환경에서도 조건은 까다로워 헤더 행과 그 아래의 구분 행(|---|---|)의 열 수가 일치하지 않으면 테이블로 인식되지 않습니다. 구분 행의 하이픈은 3 개 이상 필요한 구현도 있습니다. 바로 앞에 빈 줄이 없는 경우에도 앞 단락의 연속으로 간주되어 표가 되지 않습니다. |
먼저 구분 행의 열 수를 세어 보세요 — 여기가 하나만 어긋나도 표가 되지 않습니다. 행 끝의 파이프는 생략할 수 있지만 망설여지면 모든 행의 앞과 끝에 | 를 붙이세요 — 눈으로 열 수를 셀 수 있으므로 실수를 알아채기 쉬워집니다. 더 근본적인 이야기로 Markdown 의 표는 생 텍스트로 읽을 수 없게 된 시점에 Markdown 을 쓸 의미를 잃습니다 — 열이 5 개를 넘거나 셀이 긴 글이 되는 단계가 되면 표를 그만두고 목록으로 하거나 HTML 의 <table> 을 직접 쓰는 편이 결과적으로 읽기 쉬워집니다. |
코드 블록의 언어 이름은 하이라이터마다 인식하는 이름이 다릅니다. js 와 javascript 는 대체로 동의이지만 셸은 sh / bash / shell / console 로 동작이 달라지고 console 은 프롬프트 기호($)를 색 구분 대상에서 제외하므로 복사용 명령을 실을 때는 이쪽이 읽기 쉬워집니다. 언어 이름을 쓰지 않으면 하이라이트가 안 될 뿐 아니라 GitHub 에서는 차분의 색 구분에도 영향을 줍니다. 마지막으로 Markdown 을 쓸 때의 원칙으로 — Markdown 의 가치는 변환하지 않아도 읽힌다는 데 있습니다. 굵게와 기울임과 제목을 겹친 결과 생 텍스트가 기호투성이가 되어 읽히지 않는다면 그것은 Markdown 을 잘못 쓰고 있는 것입니다. 장식이 필요할 만큼 복잡한 문서는 Markdown 이 아니라 다른 형식으로 써야 할 문서입니다.
📖 사용법
-
1
Markdown 입력Markdown을 왼쪽에 입력하거나 붙여넣습니다.
-
2
실시간 미리보기 확인오른쪽에 GitHub 스타일 HTML이 표시됩니다.
-
3
HTML로 복사HTML 탭으로 전환하여 복사합니다.
❓ 자주 묻는 질문
GFM을 지원하나요?
HTML 태그도 사용할 수 있나요?
수학 수식도 지원하나요?
입력은 어디에 저장되나요?
🐛 이 도구에서 문제가 발생했나요?
무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.
보고 감사합니다!
운영자에게 전달되었습니다. 개선에 사용됩니다.