Softonic

Markdown to HTML 변환기

단계 1 / 3
다음

Markdown을 붙여넣으면 깔끔한 시맨틱 HTML이 돌아옵니다, <h1>부터 <h6>, <ul>, <ol>, <table>, 구문이 강조된 <pre><code>, <blockquote>, 자동 링크된 URL. 기존 페이지에 연결하는지 독립 파일을 만드는지에 따라 전체 문서(<html>, <head>, 최소 스타일시트 포함) 또는 조각(본문 내용만) 중에서 고르세요.

Markdown을 HTML로 변환하는 방법

  1. 1

    Markdown 붙여넣기

    전체 문서 또는 스니펫. YAML 프런트매터는 있으면 자동으로 제거됩니다.

  2. 2

    확장 세트 선택

    CommonMark만, GFM(표, 작업 목록, 자동 링크), 또는 GFM + 수학.

  3. 3

    출력 모드 선택

    임베딩용 조각, 또는 head와 최소 CSS가 있는 전체 HTML 문서.

  4. 4

    HTML 복사 또는 다운로드

    HTML을 텍스트로 가져오거나 `.html` 파일로 저장합니다.

매핑 표

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
언어가 있는 펜스 코드 <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
GFM 표 <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

구문 강조

언어 힌트가 있는 펜스 코드 블록은 <code> 요소에 class="language-xxx" 속성을 얻습니다. “사전 강조”를 켜면 변환기가 highlight.js의 토큰화 출력도 인라인합니다, 대상 페이지가 강조기 런타임을 로드하지 않을 때 유용합니다.

전체 문서 대 조각

  • 조각은 내부 HTML만입니다, <h1> 또는 첫 요소가 무엇이든 그것으로 시작합니다. 기존 CMS 블록, 이메일 본문, 프런트엔드 컴포넌트에 붙여넣으세요.
  • 전체 문서는 조각을 <!DOCTYPE html>, <html>, 작은 기본 스타일시트(타이포그래피, 코드 블록, 표)가 있는 <head>로 감쌉니다. .html로 저장하면 추가 파일 없이 모든 브라우저에서 열립니다.

인라인 대 외부 CSS

  • 인라인 스타일(토글)은 모든 CSS를 요소에 직접 넣습니다. 보기 안 좋지만 이메일 템플릿에는 확실합니다.
  • 클래스(기본값)는 HTML을 깔끔하게 유지하고 사이트의 스타일시트가 스타일링을 처리할 것으로 기대합니다.

접근성 참고

  • 헤딩은 계층을 보존하는 시맨틱 <h1>–<h6>로 렌더링됩니다. 소스에서 단계를 건너뛰지 마세요.
  • 대체 텍스트가 없는 이미지는 <img alt="">(장식 이미지용 의도적 빈 alt)를 만듭니다, 단 이미지가 정말 장식이 아니라면 대체 텍스트를 추가하세요.
  • 표는 헤더 행에 <thead>를 얻어 화면 낭독기 탐색을 개선합니다.

자주 묻는 질문

네. 소스의 원시 HTML은 script 태그와 이벤트 속성이 제거된 채 통과됩니다. 정제되지 않은 출력이 필요하면(입력을 신뢰하면) 토글이 있습니다, 사용자가 제공한 내용에는 쓰지 마세요.

GFM 작업 목록(- [x], - [ ])은 <input type="checkbox" disabled> 요소가 됩니다. disabled 속성이 렌더링된 화면에서 우발적 상태 변경을 막습니다.

네, 인라인 스타일을 활성화하세요. 변환기가 각 블록에 최소 style 속성을 인라인하는데, 이는 <style> 블록을 제거하는 이메일 클라이언트(Outlook, Gmail)에 필요한 것입니다.

수학 확장을 활성화하면 $x^2$ 또는 $$...$$ 블록이 KaTeX로 렌더링됩니다. 변환기는 정적 SVG나 HTML을 출력합니다, 런타임 MathJax가 필요 없습니다.

아니요. 파싱과 HTML 생성이 브라우저에서 일어납니다. 소스와 출력은 기기를 떠나지 않습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다