마크다운 HTML 변환
마크다운에서 "# Hello"는 <h1>Hello</h1>, "**bold**"는 <strong>bold</strong>, "[text](https://example.com)"는 <a href="https://example.com">text</a>로 바뀝니다.
사용 방법
- 입력 칸에 마크다운을 쓰거나 붙여 넣습니다. 예시가 들어 있어서 결과를 바로 볼 수 있습니다.
- 미리보기와 HTML을 오가며 렌더링된 화면과 소스 코드를 확인합니다.
- HTML 복사를 누르면 소스가 복사됩니다. 입력할 때마다 결과가 바로 바뀝니다.
- 출처를 모르는 글이라면 원본 HTML 허용을 꺼 두세요. 마크다운 속 HTML 태그를 출력에 남기고 싶을 때만 켭니다. 어느 쪽이든 미리보기는 늘 살균됩니다.
계산 방법
변환은 두 단계로 진행되며, 지원하는 범위에서는 CommonMark 규칙을 따릅니다. 먼저 글을 제목, 문단, 목록, 인용, 코드 블록, 구분선 같은 블록으로 나누고, 그다음 블록 안의 강조, 코드, 링크, 이미지를 읽습니다.
지원: # 제목과 밑줄식 제목, 문단과 줄바꿈, *기울임*과 **굵게**, `인라인 코드`, 펜스·들여쓰기 코드 블록, > 인용, 중첩되는 글머리표·번호 목록, [링크](url "title"), , <https://...> 자동 링크, 참조 링크, --- 구분선. 미지원: 표, 각주, 체크리스트, 취소선. 이 기능들은 CommonMark가 아니라 GitHub 확장 문법입니다.
안전장치는 두 겹입니다. 기본값에서는 마크다운에 쓴 HTML을 이스케이프하므로 <script>가 그냥 글자로 보입니다. 링크와 이미지 주소도 검사해서 링크는 http, https, mailto, tel만, 이미지는 http와 https만 허용합니다. javascript:나 data: 주소는 빠집니다. 미리보기를 그리기 전에는 허용 목록 필터를 한 번 더 거쳐 알려진 태그와 속성만 남기고, on*으로 시작하는 이벤트 핸들러와 style 속성은 모두 지웁니다.
미리보기의 링크는 rel="noopener noreferrer nofollow"를 붙여 새 탭에서 열립니다. 복사하는 HTML에는 이런 속성이 없는 변환 결과가 그대로 들어갑니다.
마크다운 문법 요약
| 입력 | 결과 | HTML |
|---|---|---|
| # 제목 | 제목 1 | <h1> |
| **굵게** | 굵게 | <strong> |
| *기울임* | 기울임 | <em> |
| `code` | 코드 | <code> |
| - 항목 | 글머리표 목록 | <ul><li> |
| 1. 항목 | 번호 목록 | <ol><li> |
| > 인용 | 인용 블록 | <blockquote> |
| [text](url) | 링크 | <a href> |
|  | 이미지 | <img> |
| --- | 구분선 | <hr /> |
자주 묻는 질문
남이 쓴 마크다운을 미리 봐도 안전한가요?
네. 글 속 HTML은 기본으로 이스케이프되고 위험한 링크 형식은 지워지며, 화면에 그리기 전에 한 번 더 걸러집니다. 스크립트와 이벤트 핸들러는 실행되지 않습니다. 다만 링크한 이미지는 그 이미지 서버에서 불러옵니다.
HTML 태그가 글자로 보여요
원본 HTML 허용이 꺼져 있어서 일부러 이스케이프한 것입니다. 켜면 태그가 HTML 출력에 그대로 들어갑니다. 미리보기에서는 script 태그처럼 위험한 것은 여전히 지워집니다.
표나 체크리스트도 되나요?
안 됩니다. 표, 체크리스트, 각주, 취소선은 GitHub Flavored Markdown에서 추가한 문법입니다. 이 도구는 CommonMark 핵심 기능을 다룹니다.
문단 안에서 줄을 바꾸려면?
줄 끝에 공백 두 칸을 넣거나 백슬래시를 붙이세요. CommonMark처럼 줄바꿈 하나는 공백으로 처리됩니다.
별표나 밑줄을 그대로 보여 주려면?
\*나 \_처럼 앞에 백슬래시를 붙이세요. 인라인 코드나 코드 블록 안에서는 이스케이프할 필요가 없습니다.
입력한 글이 업로드되나요?
아니요. 변환과 미리보기 모두 브라우저에서 처리합니다.