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 생성이 브라우저에서 일어납니다. 소스와 출력은 기기를 떠나지 않습니다.

관련 도구

보색 찾기

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

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

텍스트 파일 인코딩 변환기

깨진 문자를 고치기 위해 텍스트를 UTF-8, UTF-16, Latin-1, Windows-1252 등 여러 인코딩 사이에서 변환하세요.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

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