마크다운 변환

Markdown ↔ HTML 변환, 미리보기 제공

사용 안내

🚀 빠른 시작

  • 왼쪽 입력란에 내용을 붙여넣기
  • 모드 선택(→HTML 또는 →Markdown)
  • 자동 변환, 오른쪽에 결과 표시
  • 미리보기/HTML 출력: Markdown → HTML은 기본적으로 KaTeX/Mermaid를 렌더링

📌 자주 쓰는 활용 사례

  • 블로그/문서 미리보기: 렌더링과 색상 빠르게 확인
  • 이메일 발송: 내보낸 HTML을 본문에 붙여넣기(인라인 스타일 권장)
  • 리치 텍스트 → Markdown: 웹/CMS 리치 텍스트를 정리해 버전 관리
  • 기술 문서: 수식/다이어그램 렌더링과 내보내기를 한 번에
  • 에디터 마이그레이션: Markdown 방언 차이를 조율
  • 위키/지식 베이스: HTML 페이지를 Markdown으로 변환해 가져오기
  • API 변경 기록: HTML/설명을 Markdown으로 변환해 리뷰/PR

🎛️ 변환 매개변수와 렌더링

  • Markdown → HTML에서 KaTeX/Mermaid 자동 렌더링
  • HTML → Markdown은 원본을 유지/복원하며 재렌더링하지 않음
  • GFM(테이블/작업)은 기본 활성화; 엄격 모드는 표준 Markdown 사용
  • 소프트 줄바꿈 활성화; 엄격 모드는 빈 줄 또는 줄 끝 두 칸 공백
  • 매우 큰 입력은 축소 미리보기(렌더링 제한/하이라이트 비활성화)가 적용될 수 있습니다

🧭 활용 팁

  • 이메일: 인라인 스타일 권장
  • 긴 문서: 분할 변환으로 지연 최소화

⚠️ 제한 사항 및 호환성

  • 방언 차이: 플랫폼별 렌더링 상이, 공통 문법 권장
  • HTML → Markdown은 베스트 에포트: 스타일/레이아웃 손실 잦음
  • HTML → Markdown은 일부 태그/속성 무시(스크립트/스타일/메타, 임베드/폼, 미디어, on* 이벤트, style/class 등)
  • 복잡한 표/중첩은 단순화될 수 있음, 검토 권장
  • 이미지/비디오는 외부 링크 유지, 다운로드하지 않음
  • 서드파티 사전 렌더링 Mermaid SVG는 역변환이 어려움

🔒 개인정보 보호 및 보안

  • 모든 처리는 브라우저 내에서 이루어지며, 데이터는 기기를 떠나지 않습니다
  • 붙여넣은 HTML의 <script>는 실행하지 않습니다
  • KaTeX/Mermaid는 안전한 설정으로 렌더링
  • 모든 HTML을 자동 정리하지 않습니다. 변환 전후로 확인하세요

❓ 자주 묻는 질문

타깃 플랫폼과 미리보기 결과가 다를 때 어떻게 진단하나요?

타깃 Markdown 방언(CommonMark/GFM/사내 확장)을 먼저 파악하고, 생 HTML/사설 확장을 피합니다. 줄바꿈은 표준 방식(빈 줄/행 말 두 칸 공백)을 사용하고, 최소 재현 예제로 타깃에서 확인한 뒤 범위를 확장하세요.

내보낸 HTML을 안전하게 배포하려면?

도구는 <script>를 실행하지 않지만 자동 정리도 하지 않습니다. 서버/배포 파이프라인에서 DOMPurify 같은 화이트리스트 라이브러리로 on* 핸들러와 위험한 스킴을 제거하고, CSP로 외부/인라인 스크립트를 제한하세요.

HTML → Markdown에서 복잡한 구조가 깨질 때의 대응은?

이식성 높은 문법으로 바꾸세요: 중첩 표/깊은 리스트는 파이프 표/얕은 리스트로. 변환 전 ‘일반 텍스트 붙여넣기’로 span/style/class를 제거하고, 최소 예제로 문제 구간을 찾아 원본을 조정합니다.

KaTeX/Mermaid의 한계와 트러블슈팅은?

문법: KaTeX는 $$…$$/행내 $…$, Mermaid는 ```mermaid 펜스. 큰 입력은 축소(원본 표시/하이라이트 비활성화)될 수 있습니다. 밀도를 낮추고, 분할 변환하며, 최소 예제로 문법 문제를 분리하세요. 복원: KaTeX는 렌더링된 HTML에서 복원 가능, Mermaid는 이 도구가 생성하고 원본을 내장한 경우에만 복원됩니다.

Markdown 변환기 - 변환, 미리보기, 코드 강조 - CrateX.app