Markdown 미리보기

마크다운을 입력하면 실시간으로 HTML 렌더 결과를 보여줍니다.

README나 블로그 초안을 쓰다 보면 #을 몇 개 넣었을 때 어떤 크기로 보이는지, 표가 제대로 그려지는지 확인하고 싶어집니다.

이 도구는 입력한 마크다운을 그 자리에서 렌더해 보여 주고, 필요하면 변환된 HTML을 그대로 복사할 수 있게 해 줍니다.

어떻게 계산되나요

입력하는 대로 갱신됩니다

왼쪽 입력창에 글을 쓰면 잠깐의 지연 뒤 오른쪽 화면이 갱신됩니다. 아래 글자 수 표시로 분량을 확인할 수 있고, [HTML 복사] 를 누르면 렌더된 HTML 소스가 클립보드에 담깁니다. [초기화] 는 입력을 비웁니다.

지원하는 문법

GFM(GitHub Flavored Markdown) 기준으로 해석합니다.

표기결과
# 제목제목 (# 개수만큼 h1~h6)
**굵게**, *기울임*강조
- 항목, 1. 항목목록
[글자](주소)링크
> 인용인용문
백틱 세 개로 감싼 블록코드 블록

엔터 한 번도 줄바꿈으로 처리하므로, 문단을 나누려고 빈 줄을 반드시 두 번 넣을 필요는 없습니다.

안전하게 렌더합니다

변환된 HTML은 화면에 넣기 전에 살균 과정을 거쳐 <script> 같은 위험한 태그와 이벤트 속성이 제거됩니다. 그래서 미리보기 결과가 원본에 적은 HTML과 완전히 같지 않을 수 있습니다.

용어 정리

마크다운(Markdown)
`#`, `*` 같은 기호로 서식을 표현하는 경량 문법. 원문 그대로 읽어도 뜻이 통하는 것이 특징입니다.
GFM
GitHub Flavored Markdown. 표, 체크박스, 자동 링크 등을 더한 확장 문법입니다.
렌더링
마크다운 문법을 실제 HTML 태그로 바꿔 화면에 그리는 과정입니다.
살균(Sanitize)
HTML에서 스크립트 등 위험 요소를 걸러내 XSS를 막는 처리입니다.
코드 블록
백틱 세 개로 감싼 영역. 안의 내용은 서식이 적용되지 않고 그대로 표시됩니다.

자주 묻는 질문

표를 넣었는데 표로 보이지 않습니다

헤더 줄 바로 아래에 `|---|---|` 형태의 구분선이 있어야 표로 인식됩니다. 구분선의 칸 수가 헤더와 다르거나 빈 줄이 끼어 있으면 일반 문단으로 남습니다.

HTML을 직접 써도 되나요?

간단한 태그는 반영되지만, 스크립트나 이벤트 속성처럼 위험한 부분은 살균 과정에서 제거됩니다. 미리보기 용도로만 쓰고, 실제 게시할 서비스의 허용 정책은 따로 확인하세요.

입력한 내용이 서버에 저장되나요?

저장되지 않습니다. 변환은 브라우저 안에서 이뤄지고 새로 고치면 입력도 사라지므로, 중요한 원고는 따로 보관해 두세요.

줄바꿈이 다른 곳과 다르게 보입니다

이 미리보기는 엔터 한 번도 줄바꿈으로 처리합니다. 서비스에 따라 문단을 나누려면 빈 줄 두 개를 요구하는 곳도 있어, 붙여 넣은 결과가 달라 보일 수 있습니다.

미리보기가 비어 있고 "불러오는 중"이 계속 나옵니다

변환 라이브러리를 외부에서 가져오기 때문에 네트워크가 느리면 잠시 그렇게 표시됩니다. 몇 초 뒤에도 그대로면 새로 고침하거나 스크립트 차단 확장 설정을 확인해 보세요.