문서 초안 검토
목록, 코드 블록, 링크, 제목 계층이 의도한 대로 렌더링되는지 작성 중 바로 확인합니다.
마크다운 미리보기
브라우저 내부 처리
문서 초안 작성과 HTML 확인용.
Markdown 미리보기 작성 흐름
README, 릴리스 노트, 이슈 템플릿을 쓸 때 가장 번거로운 건 커밋하기 전까지 결과를 못 본다는 점입니다. 여기서 렌더링 결과와 HTML 출력을 같이 확인하면 표가 깨지거나 코드 블록이 열린 채 남는 문제를 미리 잡을 수 있습니다. 변환된 HTML을 복사해 메일이나 위키에 붙여넣는 용도로도 씁니다.
HTML 출력 확인
Markdown이 어떤 HTML로 바뀌는지 확인해 CMS나 정적 페이지에 붙여 넣기 전 구조를 점검합니다.
샘플에서 빠른 시작
기본 샘플을 불러와 코드 블록과 목록 형태를 먼저 확인한 뒤 본문으로 교체할 수 있습니다.
자주 만나는 오류
줄바꿈이 무시될 때
표준 Markdown은 한 번의 엔터를 줄바꿈으로 보지 않습니다. 줄 끝에 공백 두 칸을 넣거나 빈 줄로 문단을 나누세요.
표나 체크박스가 안 그려질 때
표, 취소선, 할 일 목록은 GitHub Flavored Markdown 확장입니다. CommonMark만 지원하는 렌더러에서는 원문 그대로 보입니다.
확인할 점
플랫폼별 Markdown 차이
GitHub, 블로그, 사내 위키는 확장 문법이 다를 수 있습니다. 최종 게시 플랫폼에서도 한 번 더 미리보는 것이 좋습니다.
HTML 붙여넣기 주의
외부에 게시할 HTML은 대상 서비스의 sanitizer와 스크립트 제한을 따릅니다. 신뢰하지 않는 HTML을 그대로 게시하지 마세요.
미리보기와 실제 렌더링은 다릅니다
GitHub, Notion, 티스토리가 각각 다른 마크다운 방언을 씁니다. 표, 각주, 체크박스, 줄바꿈 처리가 특히 갈립니다. 여기 미리보기에서 맞아도 최종 게시 위치에서 한 번 더 확인해야 합니다.
한 줄 개행이 무시됩니다
표준 마크다운은 줄 하나를 바꿔도 같은 문단으로 이어 붙입니다. 의도한 줄바꿈을 남기려면 줄 끝에 공백 두 개를 넣거나 빈 줄로 문단을 나눕니다. 붙여넣은 글이 한 덩어리로 나오는 이유가 이것입니다.
코드 블록 안에서는 마크다운이 멈춥니다
백틱 세 개로 감싼 구역 안의 별표나 밑줄은 서식이 아니라 그대로 출력됩니다. 반대로 코드 블록을 닫는 백틱을 빼먹으면 이후 문서 전체가 코드로 렌더링되므로, 미리보기가 갑자기 한 덩어리 회색으로 변하면 백틱 짝을 먼저 확인하세요.
사용 순서와 입력 예시 더 보기
사용 순서
- 왼쪽 입력창에 Markdown 초안을 붙여 넣거나 샘플을 불러옵니다.
- 렌더 버튼으로 미리보기와 HTML 결과를 갱신합니다.
- 제목 단계, 코드 펜스, 링크 URL, 목록 들여쓰기가 의도와 맞는지 확인합니다.
- HTML이 필요하면 결과를 복사하고, Markdown 원문은 저장소나 문서 도구에 따로 보관합니다.
실제 입력과 결과
표와 코드 블록
입력
| 이름 | 값 |
| --- | --- |
| port | 8080 |
```js
const a = 1;
```결과
표로 렌더링되고 코드 블록에는 문법 강조가 적용됩니다.