Markdown → HTML 변환기

언제 사용하나요?

README나 릴리스 노트를 HTML로 변환해 웹 페이지에 삽입하거나, 마크다운 문서가 실제 HTML로 어떻게 렌더링되는지 확인할 때 사용합니다.

사용 방법

• 입력란에 마크다운 텍스트를 붙여넣거나 입력합니다.
• 오른쪽에서 렌더링 미리보기를 확인합니다.
• HTML 소스 복사 버튼으로 변환된 HTML을 가져갑니다.

입력값 안내

HTML 태그로 변환할 마크다운 문법의 텍스트(예: # 제목, **굵게**)를 좌측 입력란에 작성합니다.

계산·변환 기준

marked.js 등의 마크다운 파서를 통해 텍스트를 파싱하고 HTML AST(추상 구문 트리)로 변환한 뒤, DOMPurify를 사용해 악성 스크립트(XSS)를 필터링하여 안전한 순수 HTML 텍스트로 렌더링합니다.

사용 예시

• 문서 HTML 변환 - README나 릴리스 노트를 HTML 조각으로 변환합니다.
• 렌더링 확인 - 마크다운이 실제로 어떻게 보이는지 브라우저에서 확인합니다.
• 이메일 본문 작성 - 마크다운으로 작성한 내용을 HTML로 바꿔 메일 템플릿에 넣습니다.

예시

• # 안녕하세요 → <h1>안녕하세요</h1> 형식으로 변환
• 목록과 **굵게**가 섞인 문서 → ul·strong 태그가 포함된 HTML 소스 생성
• README.md 전체 붙여넣기 → 서비스 소개 페이지용 HTML 조각으로 즉시 변환
• `[링크](https://...)` 마크다운 → `<a href='...'>링크</a>` HTML 태그로 변환
• ```코드 블록``` → <pre><code> 태그로 변환 후 블로그에 삽입
• 릴리스 노트 마크다운 → 이메일 뉴스레터용 HTML로 변환

주의사항

• 변환된 HTML은 XSS 방지를 위해 위험한 스크립트와 속성이 자동으로 필터링됩니다. 원본 HTML 태그가 의도대로 보존되지 않을 수 있습니다.
• GFM(GitHub Flavored Markdown)의 체크박스, 테이블, 각주 등 확장 문법은 파서 설정에 따라 지원 여부가 다를 수 있습니다.

계산·사용 가이드

Markdown 렌더링 방식

제목, 목록, 코드 블록, 표 같은 Markdown 문법을 HTML 태그로 변환합니다. 실제 사이트 적용 전에는 스타일과 보안 처리를 함께 확인해야 합니다.

문서 작성 흐름

Markdown 미리보기로 내용을 확인한 뒤 HTML 변환기를 사용하면 문서 초안과 최종 마크업을 빠르게 오갈 수 있습니다.

자주 묻는 질문

HTML 태그도 그대로 실행되나요?

위험한 HTML은 이스케이프하고 렌더링 결과를 정리해 보여줍니다.

코드 블록과 목록도 지원하나요?

네, 제목, 목록, 링크, 인용문, 코드 블록 등 기본 마크다운 문법을 지원합니다.

Markdown 미리보기 도구와 무엇이 다른가요?

미리보기 도구는 렌더링 결과를 보여 주고, 이 도구는 변환된 HTML 소스를 가져다 쓰는 데 초점이 있습니다.

변환한 HTML을 복사할 수 있나요?

네. 변환된 HTML 소스를 복사해 웹 페이지나 템플릿에 바로 붙여넣을 수 있습니다.

관련 도구

• Markdown Table → HTML - 마크다운 표를 HTML table로 변환합니다.
• 마크다운 미리보기 - 마크다운(Markdown) 문법으로 작성된 텍스트 소스를 실시간으로 렌더링하여 표준 HTML 결과물로 변환 및 시각적 레이아웃 미리보기를 동시 제공합니다.
• HTML 포매터 - 한 줄로 압축되거나 들여쓰기가 엉망인 HTML 코드를 태그 계층에 맞춰 줄바꿈과 들여쓰기로 정리합니다. CMS·API에서 받은 HTML 응답을 분석할 때 특히 유용합니다.
• HTML → JSX 변환기 - HTML 마크업을 React JSX에서 쓰기 좋은 속성명과 스타일 형식으로 변환합니다.
• HTML 이스케이프/언이스케이프 - HTML 특수문자를 엔티티로 바꾸고, 엔티티 문자열을 원래 문자로 되돌립니다.
• URL 인코딩/디코딩 - 텍스트를 URL 안전 형식(%XX)으로 인코딩하거나 인코딩된 URL을 원래 텍스트로 디코딩합니다.