← 도구 목록으로

Markdown 미리보기

🔒 브라우저 내부 처리

문서 초안 작성과 HTML 확인용.

Guide

Markdown 미리보기 작성 흐름

README, 릴리스 노트, 이슈 템플릿 같은 Markdown 문서를 렌더링 결과와 HTML 출력으로 함께 확인합니다.

문서 초안 검토

목록, 코드 블록, 링크, 제목 계층이 의도한 대로 렌더링되는지 작성 중 바로 확인합니다.

HTML 출력 확인

Markdown이 어떤 HTML로 바뀌는지 확인해 CMS나 정적 페이지에 붙여 넣기 전 구조를 점검합니다.

샘플에서 빠른 시작

기본 샘플을 불러와 코드 블록과 목록 형태를 먼저 확인한 뒤 본문으로 교체할 수 있습니다.

Workflow

사용 순서

  1. 왼쪽 입력창에 Markdown 초안을 붙여 넣거나 샘플을 불러옵니다.
  2. 렌더 버튼으로 미리보기와 HTML 결과를 갱신합니다.
  3. 제목 단계, 코드 펜스, 링크 URL, 목록 들여쓰기가 의도와 맞는지 확인합니다.
  4. HTML이 필요하면 결과를 복사하고, Markdown 원문은 저장소나 문서 도구에 따로 보관합니다.

Examples

실제 입력과 결과

표와 코드 블록

입력

| 이름 | 값 |
| --- | --- |
| port | 8080 |

```js
const a = 1;
```

결과

표로 렌더링되고 코드 블록에는 문법 강조가 적용됩니다.

Troubleshooting

자주 만나는 오류

줄바꿈이 무시될 때

표준 Markdown은 한 번의 엔터를 줄바꿈으로 보지 않습니다. 줄 끝에 공백 두 칸을 넣거나 빈 줄로 문단을 나누세요.

표나 체크박스가 안 그려질 때

표, 취소선, 할 일 목록은 GitHub Flavored Markdown 확장입니다. CommonMark만 지원하는 렌더러에서는 원문 그대로 보입니다.

Review

확인할 점

플랫폼별 Markdown 차이

GitHub, 블로그, 사내 위키는 확장 문법이 다를 수 있습니다. 최종 게시 플랫폼에서도 한 번 더 미리보는 것이 좋습니다.

HTML 붙여넣기 주의

외부에 게시할 HTML은 대상 서비스의 sanitizer와 스크립트 제한을 따릅니다. 신뢰하지 않는 HTML을 그대로 게시하지 마세요.

Related

함께 쓰면 좋은 도구

  • 정규식 테스트기 — 정규식 패턴과 플래그를 테스트하고 매치 결과와 치환 결과를 빠르게 확인할 수 있습니다.
  • 텍스트 비교기 — 두 텍스트를 줄 단위로 비교하고 변경 내용을 unified diff 형태로 확인할 수 있습니다.
  • 텍스트 케이스 변환기 — camelCase, snake_case, kebab-case, PascalCase를 서로 변환할 수 있습니다.
  • 텍스트 정리기 — 공백 정리, 줄 중복 제거, 정렬, slugify 작업을 한 번에 처리합니다.
  • 텍스트 통계 계산기 — 글자 수, 단어 수, 줄 수, 예상 읽기 시간을 한 번에 계산합니다.