Markdown 소스·렌더링 비교기

Markdown 소스·렌더링 비교기 사용 가이드

Markdown 문법이 의도대로 해석됐는지 확인하려면 결과 HTML을 직접 보는 것이 가장 정확합니다. 이 비교기는 원본 Markdown, 변환된 HTML 코드, 태그를 뺀 화면 글자 세 부분을 차례로 보여 줘서 '왜 목록이 안 됐지?' 같은 문제를 코드 수준에서 확인할 수 있습니다.

제목, 문단, 굵게·기울임·취소선, 인라인 코드, 코드 블록, 목록과 작업 목록, 표, 인용, 구분선, 링크와 이미지를 HTML로 바꿉니다. 원문에 섞인 <script> 같은 HTML은 글자로 바꿔 실행되지 않게 하고, javascript: 같은 위험한 주소의 링크는 글자만 남깁니다.

하위 목록은 같은 단계로 펼쳐 보여 주는 등 간단한 변환기이므로, 사이트마다 다른 세부 렌더링은 해당 사이트 미리보기로 최종 확인하세요.

사용 방법

1. 1'.md·.txt 파일'에서 확인할 문서를 고르거나 'Markdown 내용'에 문법을 확인할 부분을 붙여 넣습니다.
2. 2'실행'을 누르면 [원본 Markdown], [변환된 HTML 코드 · 스크립트 제거], [화면에 보이는 글자] 세 부분이 나옵니다.
3. 3의도와 다른 HTML이 나온 줄을 찾아 원문 문법을 고치고 다시 실행해 비교합니다.

# Preview

**Bold** and [link](https://example.com).

[원본 Markdown · 52자]
# Preview

**Bold** and [link](https://example.com).

[변환된 HTML 코드 · 스크립트 제거]
<h1 id="preview">Preview</h1>
<p><strong>Bold</strong> and <a href="https://example.com">link</a>.</p>

[화면에 보이는 글자]
Preview

Bold and link.

이럴 때 쓰면 좋아요

• 목록이나 표가 화면에서 깨질 때 어떤 HTML로 바뀌는지 확인할 때
• Markdown 원고를 HTML 편집기에 붙여 넣기 전에 결과 코드를 받을 때
• 검색 미리보기나 요약에 쓰일 순수 글자만 뽑아 볼 때
• 외부에서 받은 Markdown에 위험한 스크립트가 섞였는지 확인할 때

문제가 생겼을 때

활용 팁

• 줄 끝에 공백 두 칸을 넣으면 <br />로 줄이 바뀝니다. 공백이 보이지 않아 헷갈리면 이 비교기에서 <br /> 위치를 확인하세요.
• HTML 코드는 XHTML 형식(<hr />, <br />)으로 나오므로 EPUB이나 XML 문서에 그대로 넣어도 형식 오류가 나지 않습니다.

자주 묻는 질문