1. 홈
  2. 개발자
  3. 마크다운 미리보기

마크다운 미리보기

마크다운을 입력하면 변환된 화면을 바로 보여주고 HTML로 내보냅니다.

내 브라우저에서 처리 · 업로드 없음 오프라인 동작
미리보기
미리보기를 준비하는 중입니다…

미리보기는 스크립트를 실행할 수 없는 격리된 영역(sandbox iframe)에 정화(DOMPurify)한 HTML만 그립니다. 안전을 위해 미리보기 안의 링크는 열리지 않습니다.

입력한 글은 브라우저 안에서만 변환되며 서버로 전송되지 않습니다. 단, 마크다운에 넣은 외부 이미지 주소는 미리보기에서 그 서버로부터 불러옵니다.

사용 방법

  1. 왼쪽 칸에 마크다운을 쓰면 오른쪽 미리보기가 바로 바뀝니다. README, 블로그 초안, 회의록, 노션·깃허브에 붙일 글을 확인할 때 쓰세요.
  2. GitHub 방식(GFM)의 표, 체크리스트(- [ ]), 취소선(~~ ~~), 주소 자동 링크를 지원합니다.
  3. 줄바꿈 한 번을 그대로 줄바꿈으로 보고 싶다면 “줄바꿈 한 번도 줄바꿈으로 표시”를 켭니다(GitHub 댓글 방식).
  4. .md 다운로드로 원문을, .html 다운로드로 스타일이 들어간 웹페이지 파일을 저장합니다. HTML 복사는 본문 HTML만 복사합니다.

자주 쓰는 문법

원하는 모양 마크다운
제목 # 제목, ## 소제목 (# 개수 = 단계, # 뒤에 공백 필요)
굵게·기울임 **굵게**, _기울임_
링크·이미지 [글자](https://주소), ![설명](https://이미지주소)
목록 - 항목 또는 1. 항목
체크리스트 - [ ] 할 일, - [x] 끝난 일
인용 > 인용문
코드 `한 줄 코드`, 백틱 세 개(```)로 감싼 코드 블록
표 | 제목 | 제목 | 다음 줄에 |---|---|, 정렬은 :---:(가운데)·---:(오른쪽)

줄바꿈이 생각대로 안 될 때

표준 마크다운(CommonMark)에서는 엔터 한 번은 줄바꿈이 아니라 공백으로 처리되고, 빈 줄을 하나 넣어야 문단이 나뉩니다. 문단 안에서 줄만 바꾸려면 줄 끝에 공백 두 칸을 넣거나 \를 붙입니다. GitHub의 이슈·댓글은 엔터 한 번도 줄바꿈으로 보여주기 때문에 같은 글이 README에서는 다르게 보일 수 있습니다. 위 옵션으로 두 방식을 비교해 보세요.

안전하게 보여주는 방법

마크다운에는 HTML을 직접 쓸 수 있어서, 남이 준 글에 악성 스크립트가 숨어 있을 수 있습니다. 이 도구는 변환된 HTML을 DOMPurify로 정화해 스크립트·이벤트 속성·javascript: 링크를 지운 뒤, 스크립트 실행이 막힌 격리 영역(sandbox iframe)에만 그립니다. 같은 이유로 미리보기 안의 링크는 클릭해도 열리지 않습니다. 내보낸 .html 파일에도 스크립트를 막는 보안 정책(CSP)이 들어 있습니다.

자주 묻는 질문

쓴 글이 저장되거나 전송되나요?

아니요. 변환은 브라우저 안에서 이뤄지고 서버로 보내지 않습니다. 페이지를 닫기 전에 .md로 내려받아 두세요. 다만 글에 넣은 외부 이미지 주소는 미리보기를 위해 해당 서버에서 이미지를 불러옵니다.

웹페이지 내용을 마크다운으로 바꿀 수 있나요?

반대 방향은 HTML 마크다운 변환을 쓰세요. 글자수는 글자수 세기에서 확인할 수 있습니다.

준비 중인 도구

필요한 도구가 없나요?

어떤 작업을 하고 싶은지 적어 주세요. 요청이 많은 도구부터 만듭니다.