Markdown과 HTML 상호 변환하기
이 변환기가 하는 일
Markdown은 일반 텍스트로 쓰는 서식 문법이고, HTML은 브라우저가 실제로 그려 내는 마크업입니다. 이 도구는 둘 사이를 양방향으로 오가며 변환합니다. Markdown을 붙여 넣으면 스타일이 함께 들어간 HTML이 나오고, HTML을 붙여 넣으면 태그를 되짚어 깔끔한 Markdown으로 되돌립니다. 모든 처리는 내장 파서가 맡기 때문에, 빌드 과정을 짜거나 라이브러리를 설치하지 않고도 README나 글 초안, 문서 일부를 그대로 변환할 수 있습니다.
언제 쓰면 좋은가
Markdown으로 적어 둔 메모를 HTML만 받아들이는 곳 — CMS 입력란, 이메일 템플릿, 페이지의 한 구획 — 에 넣어야 하는데 태그를 직접 손으로 쓰기는 번거로울 때 유용합니다. 반대 방향은 넘겨받은 HTML을 계속 Markdown으로 편집하고 싶을 때 도움이 됩니다. 네 가지 테마(GitHub, Minimal, Classic, Modern)로 결과물의 모습을 대략 미리 보고, 복사하기 전에 분위기를 고를 수 있습니다. 실시간 미리보기와 코드 보기는 출력 머리글에서 한 번 클릭으로 오갈 수 있어, 렌더링 결과와 실제 마크업을 모두 확인할 수 있습니다. 이 작업 옆에는 대개 두 가지 잔일이 따라붙습니다. 제목의 대소문자 표기를 하나로 맞추려면 텍스트 케이스 변환기를 거치고, 넘겨받은 마크업에서 반복되는 패턴을 걷어내야 한다면 Regex 테스터에서 패턴을 먼저 시험해 보는 편이 훨씬 빠릅니다.
구체적인 예시
`# 릴리스 노트`라고 입력하면 `<h1>` 제목이 만들어집니다. 별표 두 개로 감싼 `**배포됨**`은 `<strong>배포됨</strong>`이 되고, 백틱 세 개로 연 블록은 `<pre><code>` 쌍으로 바뀌면서 언어 이름이 클래스로 기록됩니다. 목록, `[표시할 글자](url)` 형태로 쓴 링크, 이미지, 인용문, `---` 수평선도 각각 대응하는 HTML로 옮겨집니다. 반대로 변환하면 `<h1>`은 다시 `#`으로, `<strong>`은 다시 `**`로 돌아가, 구조가 왕복해도 그대로 유지됩니다.
참고 사항과 예외 케이스
파서가 다루는 것은 손으로 직접 쓰는 일상적인 Markdown — 제목, 강조, 인라인 코드와 코드 블록, 링크, 이미지, 목록, 인용문, 수평선 — 이며, 모든 확장 문법을 지원하지는 않습니다. Markdown 표는 해석하지 않아, 세로 막대로 그린 표는 그대로 글자로 남습니다. 표가 필요하면 HTML로 직접 작성하세요. 스타일은 별도의 스타일시트가 아니라 각 요소에 인라인 `style` 속성으로 붙습니다. 덕분에 `<style>` 블록을 걸러 내는 이메일이나 CMS 입력란에 붙여 넣어도 모양이 유지됩니다. 또한 각 테마는 페이지에 맞춰 밝은 버전과 어두운 버전을 자동으로 만들어 줍니다.