마크다운 미리보기 — 실시간 변환, HTML 복사, 표·체크리스트 지원

소개

마크다운 미리보기는 왼쪽에 마크다운을 쓰면 오른쪽에 변환된 결과를 바로 보여 주는 도구예요. README나 블로그 초안, 개발 문서, 회의록처럼 마크다운으로 쓰는 글이 의도대로 나오는지 확인할 때 쓰면 편해요. 제목·목록·인용·코드 블록은 물론 표, 취소선, 체크리스트 같은 GFM 확장 문법도 지원해요. 결과 HTML은 항상 정제(sanitize)해서 보여 주기 때문에 출처를 모르는 글을 붙여 넣어도 스크립트가 돌지 않아요.

사용법

1. 왼쪽 입력창에 마크다운을 쓰거나 붙여 넣어요. 처음 열면 예제가 들어 있고, 지우기 버튼으로 비울 수 있어요.
2. 오른쪽 미리보기가 입력이 멈춘 뒤 곧바로 갱신돼요. 표 정렬이나 중첩 목록이 의도대로인지 눈으로 확인하세요.
3. ’HTML 복사’를 누르면 정제된 HTML 조각이 클립보드에 복사돼요. 블로그 에디터의 HTML 모드나 메일 템플릿에 붙여 넣을 수 있어요.
4. ’.md 저장’은 입력한 원문을, ’.html 저장’은 기본 스타일이 들어간 완성형 HTML 문서를 내려받아요. 파일 이름은 첫 번째 # 제목에서 만들어요.
5. 작성 중인 글을 이어 쓰려면 ’브라우저에 임시 저장’을 켜세요. 이 브라우저에만 저장돼요.

변환 기준

• 변환 엔진: marked(MIT 라이선스)로 GFM 규격에 맞춰 HTML로 바꿔요. 줄바꿈은 표준대로 줄 끝에 공백 두 칸이나 빈 줄이 있어야 반영돼요.
• 정제: DOMPurify(Apache-2.0 또는 MPL-2.0)로 HTML을 거른 뒤에만 화면에 넣어요. script, iframe, object, form, style 태그와 on으로 시작하는 이벤트 속성, style 속성, javascript:·data: 주소의 링크는 제거해요.
• 링크: 남은 링크는 새 탭에서 열리고 rel=“noopener noreferrer”가 붙어요.
• 체크박스: 체크리스트의 체크박스는 항상 비활성(읽기 전용)이에요.
• 이미지: 이미지 주소는 그대로 남기므로 내 브라우저가 해당 서버에서 직접 이미지를 받아와요. 이미지 서버는 내 접속 사실을 알 수 있어요.
• 저장 파일: .md는 UTF-8 원문 그대로, .html은 UTF-8에 lang 속성과 최소한의 스타일을 붙인 문서예요.

예시

입력	결과
**굵게**	굵게
~~취소선~~	취소선
- [x] 완료	체크된 체크박스와 ‘완료’
[링크](https://example.com)	새 탭으로 열리는 링크
[누르기](javascript:alert(1))	링크 주소가 제거되어 글자만 남음
<script>alert(1)</script>	아무것도 실행되지 않음

표는 아래처럼 써요. 둘째 줄의 콜론이 정렬을 정해요.

| 이름 | 수량 |
|:---|---:|
| 사과 | 3 |