본문 바로가기
ForMyTools

마크다운 미리보기

마크다운을 실시간 HTML로 렌더링해 보여줍니다. README 작성, 블로그 글 미리보기에 좋아요.

브라우저에서 로컬 처리 · 서버 업로드 없음

편집 / 미리보기

렌더링 결과

왼쪽에 마크다운을 입력하면 여기에 결과가 표시됩니다.

마크다운 미리보기 소개

마크다운 미리보기는 왼쪽에 마크다운을 쓰면 오른쪽에 렌더링 결과를 실시간으로 보여 줍니다. README를 커밋하기 전에 표가 제대로 그려지는지 확인하거나, 블로그 글의 제목 단계와 목록 들여쓰기를 점검할 때 편집기를 설치하지 않고 바로 볼 수 있습니다.

제목(#), 굵게(**), 기울임, 목록, 인용, 코드블록, 표, 링크, 이미지 등 GitHub에서 쓰는 형태의 마크다운을 지원합니다. 초보자가 가장 자주 막히는 곳은 줄바꿈입니다. 마크다운은 그냥 엔터 한 번을 줄바꿈으로 보지 않기 때문에, 문단을 나누려면 빈 줄을 하나 넣고 같은 문단 안에서 줄만 바꾸려면 줄 끝에 공백 두 칸을 넣어야 합니다. 완성된 결과는 HTML로 복사해 블로그나 게시판 에디터에 붙여넣을 수 있습니다.

렌더링할 때 DOMPurify로 스크립트와 이벤트 속성을 걷어내므로 미리보기와 복사한 HTML 모두 실행 가능한 코드가 남지 않습니다. 다만 붙여넣는 사이트의 CSS에 따라 표나 코드블록의 모양은 달라질 수 있습니다. 렌더링 엔진(marked, DOMPurify)은 외부 CDN에서 처음 한 번 불러오기 때문에 이 도구만큼은 인터넷 연결이 필요합니다. 사내망처럼 외부 접속이 막힌 환경이나 광고 차단 확장 프로그램이 CDN을 막는 경우 미리보기가 비어 보일 수 있습니다.

사용 방법

  1. 왼쪽 입력창에 마크다운 문법으로 글을 작성하거나 붙여넣으세요.
  2. 오른쪽에 렌더링 결과가 실시간으로 표시됩니다. 처음 입력할 때 렌더링 엔진을 한 번 불러옵니다.
  3. 처음이라면 샘플 넣기 버튼으로 예시 문법을 확인해 보세요.
  4. 완성된 결과는 HTML 복사 버튼으로 가져가 블로그·게시판 등에 붙여넣을 수 있어요.

자주 묻는 질문

어떤 마크다운 문법을 지원하나요?
제목(#), 굵게(**), 기울임(*), 목록, 인용(>), 코드블록(```), 표, 링크, 이미지 등 일반적인 GitHub 스타일 마크다운을 지원합니다. 줄바꿈은 줄 끝에 공백 두 칸을 넣거나 빈 줄로 문단을 나눠 표현하세요.
복사한 HTML을 그대로 붙여넣어도 안전한가요?
렌더링 시 DOMPurify로 위험한 스크립트·이벤트 속성을 제거(살균)하므로, 미리보기와 복사된 HTML 모두 XSS 위험이 없는 안전한 코드입니다. 다만 붙여넣는 사이트의 CSS에 따라 표시 스타일은 달라질 수 있어요.
표가 제대로 그려지지 않아요.
표는 머리글 줄 바로 아래에 |---|---| 형태의 구분선이 있어야 인식됩니다. 그리고 모든 줄의 파이프(|) 개수가 같아야 합니다. 셀 안에 파이프를 넣으려면 \|처럼 역슬래시로 처리하세요.
미리보기가 안 보이고 안내 문구만 나와요.
렌더링 엔진은 외부 CDN에서 불러오기 때문에 인터넷 연결이 필요합니다. 네트워크가 차단된 환경이거나 광고 차단 확장 프로그램이 CDN을 막으면 로드되지 않을 수 있습니다. 잠시 후 다시 시도하거나 다른 네트워크에서 열어 보세요.

같은 카테고리의 다른 도구

AI 텍스트 정제기 인기 ChatGPT 등 AI 답변의 마크다운 기호(**, #, - )와 상투어를 한 번에 제거해 바로 붙여넣을 수 있게 정리합니다. 글자수 세기 인기 자소서·과제 문항별 제한 글자수 대비 현재 글자수를 게이지로 확인하세요. 공백 포함/제외, 바이트수까지. 대소문자 · 표기법 변환 camelCase, snake_case, kebab-case, 대문자/소문자 등 텍스트 표기법을 한 번에 변환합니다. 텍스트 비교 (Diff) 두 글의 달라진 부분을 줄·단어 단위로 하이라이트해 비교합니다. 버전 비교, 교정 확인에 유용합니다.