게시판·메일에 붙일 HTML
Markdown 으로 쓴 공지나 릴리스 노트를 HTML 만 받는 게시판·메일 편집기에 넣을 코드로 바꿉니다.
MARKDOWN · HTML CONVERTER
Markdown ↔ HTML
마크다운이 HTML 로 어떻게 바뀔까?
# 제목, **굵게** 를 넣으면 <h1>, <strong> 으로 된 HTML 코드를 보여 주고, 반대로 HTML 을 Markdown 으로 되돌립니다. 결과는 화면에 그리지 않고 코드로만 보여 줘 붙여 넣은 HTML 이 실행되지 않습니다.
- 양방향 변환
- GFM 표 지원
- 결과는 코드로만
- 브라우저에서만 처리
MADE FOR YOUR WORK
이럴 때 쓰세요
옛 문서를 Markdown 으로
블로그나 위키에서 복사한 HTML 을 Markdown 으로 바꿔 Git 저장소 문서로 옮깁니다.
렌더링 결과 미리 확인
목록 들여쓰기나 줄바꿈이 어떤 태그가 되는지 코드로 확인해 문서가 의도대로 나올지 점검합니다.
남의 HTML 구조만 보기
출처를 모르는 HTML 을 실행하지 않고 제목·목록·링크 구조만 텍스트로 뽑아 봅니다.
STEP BY STEP
Markdown ↔ HTML 사용 방법
이렇게 쓰세요
변환 방향 고르기
Markdown → HTML 또는 HTML → Markdown 중 하나를 선택합니다.
입력 칸에 붙여 넣기
변환할 원문을 넣습니다. 입력은 1 MB 까지 받습니다.
실행 누르기
결과 칸에 변환된 코드가 나옵니다. 버튼 아래 상태 줄에 완료 또는 오류 이유가 표시됩니다.
결과 복사
결과 복사 버튼으로 가져가 붙일 곳에 넣습니다. HTML 을 서비스에 올릴 때는 그 서비스의 정제 규칙을 거치세요.
UNDERSTAND THE BASICS
Markdown 기호와 HTML 태그의 짝
Markdown 은 HTML 을 손으로 쓰기 번거로워 만든 약식 표기입니다. 줄 앞의 # 개수가 제목 단계, 별표 두 개가 굵게, 빈 줄이 문단 구분입니다. 그래서 Markdown → HTML 은 대부분 기호를 태그로 일대일로 바꾸는 작업입니다.
문법에는 방언이 있습니다. 표와 ~~취소선~~ 은 원래 Markdown 에 없고 GitHub 식(GFM) 확장입니다. 이 도구의 Markdown → HTML 은 GFM 을 켠 marked 라이브러리를 써서 표와 취소선도 태그로 바꿉니다.
반대 방향은 손실이 있습니다. HTML 은 Markdown 보다 표현이 훨씬 넓어서, Markdown 에 대응하는 기호가 없는 태그는 안의 글자만 남습니다. 이 도구는 HTML 을 읽을 때 script·style·iframe·img·video 같은 태그를 먼저 지우고, 표 태그도 Markdown 표로 바꾸지 않고 글자만 남깁니다.
| Markdown | HTML |
|---|---|
| # 제목 | <h1>제목</h1> |
| **굵게** | <strong>굵게</strong> |
| *기울임* 또는 _기울임_ | <em>기울임</em> |
| [링크](https://devin.kr) | <a href="https://devin.kr">링크</a> |
| - 항목 | <ul><li>항목</li></ul> |
| `코드` | <code>코드</code> |
| > 인용 | <blockquote>인용</blockquote> |
Markdown ↔ HTML 사용 안내
Markdown을 HTML로, HTML을 Markdown으로 변환합니다. 결과는 실행하지 않고 코드로 확인합니다.
변환 방향을 선택하고 Markdown 또는 HTML을 붙여 넣은 뒤 실행하세요. HTML은 미리 실행하지 않고 코드로 출력합니다. HTML → Markdown 변환에서는 스크립트와 이미지 등 외부 자원을 제외합니다.
QUICK EXAMPLE
Markdown ↔ HTML 사용 예제
입력 · 시작
# 시작하기
결과 · 확인
<h1>시작하기</h1>
변환한 HTML을 서비스에 넣기 전에는 해당 서비스의 HTML 정제 정책을 적용하세요.
어떻게 구현했나
Markdown → HTML 은 marked, HTML → Markdown 은 Turndown 을 씁니다. 두 라이브러리 모두 버전을 고정해 직접 호스팅합니다.
HTML 을 넣었을 때 그 코드를 실행하지 않습니다. template 요소 안에서 파싱하면 문서에 붙지 않은 상태로 구조만 읽을 수 있고, 그 다음 script·style·iframe·object·embed·link·img·video·audio·source 를 통째로 제거한 뒤 변환합니다.
그래서 외부 자원을 부르는 태그는 결과에 남지 않습니다. 남의 HTML 을 붙여넣어 구조만 보고 싶을 때 안전하도록 만든 것이지, HTML 을 그대로 보존하는 변환이 아닙니다.
BEFORE YOU FINISH
자주 하는 실수
변환한 HTML 을 그대로 서비스에 넣는다
Markdown 안에 적힌 HTML 태그는 걸러지지 않고 결과에 그대로 남습니다. 사용자 입력을 변환해 화면에 넣는다면 반드시 서버 쪽 HTML 정제를 거치세요.
HTML → Markdown 에서 이미지가 사라졌다고 놀란다
img 태그는 외부 자원을 부르는 태그라 변환 전에 제거됩니다. 이미지는 결과 Markdown 에  형식으로 직접 추가해야 합니다.
코드 블록이 백틱으로 나올 거라 기대한다
HTML → Markdown 은 <pre><code> 를 네 칸 들여쓴 코드 블록으로 바꿉니다. ``` 울타리 형식이 필요하면 결과에서 직접 감싸 주세요.
자주 묻는 질문
마크다운을 HTML 로 바꾸는 방법은?
변환 방향을 Markdown → HTML 로 두고 원문을 붙여 넣은 뒤 실행을 누르면 됩니다. 결과 칸의 HTML 코드를 결과 복사로 가져가세요.
HTML 을 마크다운으로 변환하면 표도 바뀌나요?
바뀌지 않습니다. 표 태그는 Markdown 표로 변환하지 않고 칸의 글자만 남습니다. 표는 Markdown 표 만들기 도구로 따로 만드는 편이 빠릅니다.
변환 결과를 미리보기로 볼 수 있나요?
이 도구는 결과를 렌더링하지 않고 코드로만 보여 줍니다. 입력에 섞인 스크립트가 실행되지 않게 하려는 설계입니다.
HTML → Markdown 결과의 목록 기호가 * 로 나와요
변환 라이브러리 기본값이 목록은 *, 기울임은 _, 굵게는 ** 입니다. Markdown 에서는 - 와 * 목록이 같은 뜻이라 그대로 써도 됩니다.
제목이 === 밑줄이 아니라 # 으로 나오나요?
네. HTML → Markdown 에서 제목은 # 개수로 단계를 나타내는 방식(ATX)으로 만듭니다.
입력한 데이터는 어디에서 처리하나요?
이 도구의 입력 데이터는 브라우저에서 처리하며 도구 기능을 위해 서버로 업로드하지 않습니다. 결과를 공유하기 전 민감한 정보가 없는지 확인하세요.