HTML을 Markdown으로 변환
스크립트, 스타일, 삽입 미디어는 제거되고 알 수 없는 태그는 텍스트를 유지합니다. 표는 GFM 표가 됩니다.
HTML을 Markdown으로 바꾸기
블로그 글을 README로, 문서 페이지를 위키로, 웹 기사를 메모로 옮기는 것은 구조를 잃지 않고 HTML을 없애는 일입니다. 이 변환기는 브라우저가 하는 방식으로 마크업을 해석하고 같은 뜻의 Markdown을 씁니다 — 제목은 제목으로, 중첩 목록은 중첩된 채로, 표는 표로 — 스크립트, 스타일, 추적 픽셀은 사라집니다.
단계
- 1 HTML — 전체 페이지든 일부든 — 을 위쪽 상자에 붙여 넣으세요. 대부분의 브라우저에서 페이지를 오른쪽 클릭해 ‘페이지 소스 보기’로 복사할 수 있습니다.
- 2 아래의 Markdown을 읽으세요. 입력과 함께 갱신됩니다. 중첩 목록, 언어가 있는 코드 블록, 정렬이 있는 표가 보존됩니다.
- 3 결과를 복사하거나 .md 파일로 다운로드하세요.
무엇이 무엇으로 바뀌나
h1부터 h6 제목은 샵 제목이 됩니다. p는 단락, br은 강제 줄바꿈, hr은 구분선이 됩니다. strong과 b는 이중 별표, em과 i는 단일 별표, del과 s는 이중 물결표가 되고, code는 백틱, pre는 언어 클래스를 펜스 라벨로 유지하는 펜스 블록이 됩니다. 링크는 [텍스트](url), 이미지는 가 되고, ul과 ol은 두 칸 들여쓰기로 중첩되는 대시 목록과 번호 목록이 됩니다. blockquote는 큰 부호가 앞에 붙은 줄이 되고, table은 align 속성이나 text-align 스타일에서 정렬을 가져온 GFM 표가 됩니다.
텍스트가 아니라 DOM으로 동작하는 이유
정규식은 HTML을 안정적으로 다루지 못합니다. 태그는 중첩되고, 속성 문자열 안에 꺾쇠가 들어가며, 실제 페이지는 잘 짜여 있는 경우가 드뭅니다. 변환기는 HTML을 브라우저 자체 파서에 넘기고, 파서는 렌더링할 때와 똑같이 닫히지 않거나 잘못 중첩된 태그를 고친 뒤 생긴 트리를 순회합니다. 목록 항목 안의 굵은 글씨 안의 링크가 제대로 나오는 이유입니다.
무엇이 버려지고 무엇이 남나
script, style, head, noscript, template, iframe, object, embed, svg, canvas, video, audio는 내용과 함께 제거됩니다 — Markdown에 대응물이 없고 대부분 잡음이기 때문입니다. 그 외 인식되지 않는 것은 텍스트를 유지합니다. 사용자 정의 요소, span, div는 컨테이너로 취급되어 자식이 변환됩니다. 따라서 알 수 없는 태그 안의 인라인 서식은 살아남습니다.
이스케이프와 깔끔한 출력
Markdown에서 의미가 바뀔 문자 — 별표, 밑줄, 백틱, 백슬래시, 줄 시작의 샵이나 대시 — 는 텍스트에서 이스케이프되어, Markdown을 HTML로 되돌려도 같은 결과가 나옵니다. 공백은 pre 안을 제외하고 브라우저가 하듯 접힙니다. 빈 줄은 블록 사이에 하나로 줄어듭니다.