Markdown 미리보기
안전한 HTML 출력의 무료 Markdown 미리보기입니다.
브라우저 안에서 마크다운 미리보기
왼쪽에 마크다운을 쓰면 오른쪽에 그려진 결과가 곧바로 나타납니다. 제목·강조·링크·목록·인용·구분선, 그리고 울타리 코드 블록까지 다룹니다.
눈여겨볼 것은 마크다운에 단 하나의 공식 규격이 없다는 점입니다. 2004년의 처음 문법은 정해 두지 않은 대목을 여럿 남겼고, 그래서 GitHub과 CommonMark 등은 겹친 목록, 줄바꿈, 낱말 속 밑줄 같은 자리에서 서로 어긋납니다. 한곳에서 멀쩡해 보이던 글이 다른 곳에서는 달리 그려질 수 있습니다. 특히 자주 걸리는 것이 줄바꿈으로, 대다수 구현에서 한 번의 줄바꿈은 문단 안의 줄바꿈이 되지 않습니다. 줄 끝에 공백 둘을 두거나 빈 줄을 끼워야 합니다.
이 도구는 미리보기에 앞서 원시 HTML을 이스케이프하므로, 붙여 넣은 내용이 여기서 스크립트를 돌릴 길은 없습니다.
마크다운 미리보기 쓰는 법
- 마크다운을 붙여 넣거나 씁니다 왼쪽 편집기에 넣으면 미리보기가 곧바로 새로 그려집니다.
- 그려진 결과를 살핍니다 올리기 전에 제목·목록·링크·코드를 확인합니다.
- 필요하면 HTML을 복사합니다 만들어진 안전한 HTML을 호환되는 편집기로 옮길 수 있습니다.
더 잘 활용하기 위한 팁
- 역따옴표 셋으로 코드를 둘러싸면 들여쓰기와 기호가 그대로 보존됩니다.
- 이 미리보기는 스크립트 주입의 위험을 줄이려고 원시 HTML을 일부러 글자로 보여 줍니다.
- 표와 겹친 목록은 들여쓰기 깊이 때문에 가장 잘 어긋나므로, 미리보기를 보며 한 줄씩 다듬는 편이 좋습니다.
이럴 때 쓸 수 있습니다
README를 쓰면서 확인할 때
쓰는 자리에서 보이는 것과 GitHub이 그려 내는 것이 늘 같지는 않습니다. 올리기 전에 눈으로 확인할 수 있습니다.
표와 겹친 목록을 다듬을 때
기호의 자리와 들여쓰기의 깊이에 따라 결과가 바뀌는 대목은, 눈으로 보며 고치는 편이 빠릅니다.
글을 HTML로 바꿔 가져갈 때
만들어진 HTML을 그대로 복사할 수 있어, 콘텐츠 시스템에 붙여 넣기 전 초안으로 쓰기 좋습니다.
남에게 줄 자료를 PDF로 만들 때
마크다운으로 적은 절차서나 메모를 그대로 건넬 수 있는 꼴로 다듬을 수 있습니다.
문법을 익히며 쓸 때
입력과 결과가 나란히 있어, 어느 기호가 무엇이 되는지 시험해 가며 몸에 붙습니다.
마크다운 용어
- 마크다운
- 기호로 제목과 강조를 나타내는 가벼운 문법입니다. 단 하나의 공식 규격은 없고 구현마다 차이가 있습니다.
- CommonMark
- 모호하던 대목을 엄밀히 정해 놓은 규격입니다. 오늘날 대다수 구현이 이를 바탕으로 삼습니다.
- GitHub Flavored Markdown
- CommonMark에 표·취소선·할 일 목록을 더한 확장입니다. GitHub에서의 모습은 이를 따릅니다.
- 줄바꿈의 처리
- 대다수 구현에서 한 번의 줄바꿈은 문단 안의 줄바꿈이 되지 않습니다. 줄 끝에 공백 둘을 두거나 빈 줄을 끼웁니다.
- 울타리 코드 블록
- 역따옴표 셋으로 둘러싼 구간입니다. 여는 자리에 언어 이름을 적으면 GitHub 등에서는 색이 입혀집니다(이 미리보기는 색을 입히지 않으며, mermaid라고 적은 경우에만 도표로 그립니다).
- 새니타이즈
- 붙여 넣은 HTML에서 위험한 요소를 걷어 내는 처리입니다. 이 미리보기는 안전하게 보이기 위해 이를 거칩니다.
자주 묻는 질문
올리기 전에 미리 보는 까닭
마크다운은 쓰기에 가볍지만, 기호 하나가 빠진 것만으로 한 쪽의 짜임새가 바뀌기도 합니다. 그 자리에서 보이는 미리보기가 있으면 제목과 링크와 목록의 모습을 README나 이슈, 위키, 콘텐츠 시스템에 붙여 넣기 전에 알아볼 수 있습니다.
이 도구는 아무 HTML이나 돌리기보다 안전한 공통 부분집합을 택했습니다. 그래서 출처가 미덥지 않은 곳에서 복사해 온 내용을 살필 때에도, 자기 글을 다듬을 때에도 두루 쓸모가 있습니다.