README를 HTML로 옮기는 순서
이 도구는 Markdown 문서의 구조를 확인하고, 웹 편집기에 붙여 넣을 HTML 조각을 만드는 용도입니다. 먼저 제목과 목록을 입력하고, 미리보기에서 계층을 확인한 뒤 HTML을 복사하세요. 블로그에서는 HTML 편집 모드에 붙여 넣어야 태그가 글자 그대로 보이지 않습니다.
- 예제 불러오기로 제목·목록·링크가 있는 짧은 문서를 엽니다. 기존 입력이 있으면 교체 전에 확인합니다.
- Markdown을 고치면서 미리보기와 HTML 코드를 비교합니다. 오른쪽 결과를 직접 편집하는 방식은 지원하지 않습니다.
- HTML 복사 또는 HTML 다운로드로 결과를 옮깁니다. 결과에는 이 사이트의 화면 스타일이 포함되지 않습니다.
입력과 출력 비교
다음 예제를 붙여 넣으면 제목 아래에 굵은 글씨와 링크가 있는 단락이 생깁니다.
## 배포 체크리스트
**준비 완료**: [문서 열기](https://example.com)
변환된 HTML 조각:
<h2>배포 체크리스트</h2>
<p><strong>준비 완료</strong>: <a href="https://example.com">문서 열기</a></p>
자주 쓰는 문법과 확인할 점
| 용도 | Markdown 입력 | 결과·주의점 |
|---|---|---|
| 제목 |
## 설치 방법
|
h2 제목입니다. # 뒤에 공백이 필요합니다. |
| 목록 |
- 첫 항목
|
글머리 목록으로 바뀝니다. 각 항목은 새 줄에 작성합니다. |
| 코드 |
`const ready = true`
|
인라인 코드입니다. 여러 줄 코드는 백틱 세 개로 감쌉니다. |
| 표 |
| 항목 | 값 |
|
다음 줄에 | --- | --- | 구분선을 넣습니다. |
| 줄바꿈 | 줄 끝 공백 두 개 또는 빈 줄 | 일반적인 한 번의 Enter는 같은 단락으로 이어질 수 있습니다. |
결과가 예상과 다를 때
- 미리보기와 블로그 모양이 다릅니다. 변환되는 것은 HTML 구조입니다. 글꼴, 여백, 표 테두리는 붙여 넣는 사이트의 CSS가 결정합니다.
- HTML 일부가 사라졌습니다. script, iframe, form, style과 이벤트 속성 등은 제거합니다. CSS·JavaScript 실행, HTML → Markdown 역변환, 수식·Mermaid 렌더링은 지원하지 않습니다.
- 이미지가 표시되지 않습니다. 외부 주소로 자동 요청하지 않도록 미리보기는 대체 텍스트만 보여 줍니다. 복사한 HTML에는 허용된 이미지 주소가 포함되므로 다른 곳에 게시하면 이미지 서버에 요청될 수 있습니다.
- 복사가 차단됩니다. 브라우저의 클립보드 권한을 확인하거나 HTML 코드 상자에서 직접 복사하세요. 결과 다운로드도 사용할 수 있습니다.
- 코드에 색상이 없습니다. 코드 블록 구조와 언어 클래스는 만들지만 별도의 구문 강조기는 포함하지 않습니다.
문서를 게시하기 전
복사한 링크와 이미지 주소가 공개 가능한지 확인하세요. 입력 문서는 브라우저 메모리에서 처리되고 자동 저장되지 않으므로 페이지를 닫기 전에 원문을 따로 보관하세요. HTML 정화는 위험한 요소를 줄이는 기능이며, 최종 게시 서비스의 보안 검증을 대신하지 않습니다.
문법·구현 참고: Marked 공식 문서, DOMPurify 보안 정화기.