마크다운 미리보기
마크다운을 작성하며 옆에서 HTML을 실시간 미리 봅니다. GitHub 형식 표, 작업 목록, 취소선을 지원하며 안전하게 정리된 HTML 복사나 .html 다운로드가 가능합니다.
입력 내용과 파일은 브라우저 밖으로 전송되지 않습니다
여기에 Markdown을 작성하거나 붙여 넣거나 예시를 불러오세요.
입력하면 렌더링된 미리보기가 여기에 표시됩니다.
이 페이지에서
한쪽에 Markdown을 입력하면 다른 쪽에 렌더링 결과가 실시간으로 표시됩니다. README, 이슈 댓글, 문서, 릴리스 노트 초안을 작성한 뒤 HTML로 내보낼 때 편리합니다.
상세 기능
렌더링에는 marked 라이브러리와 GitHub Flavored Markdown을 사용합니다: 표, 작업 목록 - [x], 취소선 ~~text~~, 펜스 코드 블록, URL 자동 링크. GitHub 댓글처럼 줄바꿈 하나는 <br> 이 되므로 여러 줄이 한 단락으로 합쳐지지 않습니다. 코드 블록은 고정폭 글꼴로 표시되며 구문 색상은 없습니다.
Markdown 안의 원시 HTML은 안전하게 정리됩니다. 스크립트, iframe, 폼, 스타일, onclick 같은 이벤트 속성은 제거되고 javascript: 링크는 차단되며, <kbd>, <details>, <sub> 같은 무해한 태그는 유지됩니다. 링크는 새 탭에서 열립니다. 미리보기에서는 제목을 한 단계 낮춰 페이지 제목과 겹치지 않게 하며, HTML 복사 와 HTML 다운로드 에는 원래의 <h1>–<h6> 이 유지됩니다.
도구 모음은 커서 위치에 굵게, 기울임, 제목, 링크, 이미지, 인라인 코드, 목록 문법을 넣고, 스크롤 동기화 는 두 창을 같은 상대 위치에 맞춥니다. 모든 처리는 브라우저에서 이루어지며 도구는 텍스트를 저장하지 않으므로 페이지를 닫기 전에 복사해 두세요.
실용적인 예제
작업 목록: - [x] tests 와 - [ ] docs 는 체크된 체크박스와 체크되지 않은 체크박스로 렌더링됩니다.
줄바꿈: line one 과 line two ~~old~~ 두 줄은 <p>line one<br>line two <del>old</del></p> 가 됩니다.
표: | A | B |, |---|---|, | 1 | 2 | 세 줄은 머리글 행이 있는 HTML 표가 됩니다.
안전하지 않은 HTML: <script>alert(1)</script><b onclick=x>hi</b> 는 <b>hi</b> 만 내보내집니다.
이 도구 사용 방법
마크다운 작성
마크다운 에디터 에 입력합니다. 처음 열면 샘플 문서가 표시되며, 빈 페이지에서 시작하려면 지우기 를 누릅니다.
도구 모음으로 서식 지정
텍스트를 선택하고 서식 버튼(굵게, 기울임, 제목, 링크, 이미지, 코드, 목록)으로 문법을 넣습니다.
미리보기 확인
미리보기 창은 키를 누를 때마다 갱신됩니다. 스크롤 동기화 를 켜면 두 창이 함께 스크롤됩니다.
내보내기
HTML 복사 또는 마크다운 복사 를 사용하거나, HTML 다운로드 로 기본 스타일이 적용된
markdown-preview.html을 저장합니다.
팁 및 모범 사례
img/logo.png같은 상대 이미지 경로는 여기서 해석할 수 없습니다. 이미지를 보려면 전체https://URL을 사용하세요.- 다른 사이트의 이미지는 브라우저가 해당 서버에서 직접 불러옵니다.
- GitHub 전용 확장 기능(
@mentions,:smile:같은 이모지 단축 코드, Mermaid 다이어그램, 수식)은 일반 텍스트로 표시됩니다. <kbd>Ctrl</kbd>나<details>같은 인라인 HTML은 사용할 수 있지만style과class속성은 제거됩니다.- 다운로드한 파일은 밝은 스타일의 독립 페이지로, 바로 인쇄하거나 첨부할 수 있습니다.