나는 생계를 위해 콘텐츠를 마이그레이션, 십 년간 워드 프레스 사이트를 실행 한 사람은 결국 할 의미에서. 나는 페이지 빌더에서 Markdown 기반의 문서 시스템으로 오래된 게시물의 배치를 이동했을 때, 나는 무엇을 발견 "깨끗한 HTML" 정말 야생에서 의미: <p> 인라인 스타일이 있는 태그, 비어 있음 <span>s 한 단어 포장, <div>s 단락 주위에 깊은 세 가지 수준,그리고 단순히 닫히지 않은 가끔 태그. Markdown 필드에 붙여 넣기하면 문자 그대로의 각도 브래킷의 벽이 생겼습니다. 복사 붙여 넣기 the 렌더링 텍스트는 모든 링크, 제목 및 목록을 잃어 버렸습니다. 두 지름길 모두 작동하지 않았고, 나는 그것에 대해 분별력을 갖기 전에 오후 동안 기사를 손으로 청소했습니다.
분별력을 얻는다는 것은 HTML-to-Markdown 을 있는 그대로 취급하는 것을 의미했다: 복사-붙여넣기가 아니라 규칙들의 명확한 집합을 가진 구조화된 변환. 표제어 요소는 a 가 된다 # 선. 대담한 된다 **. 링크가 됩니다 [text](url). 테이블은 파이프 테이블이 됩니다. 일단 당신이 그 매핑과 실제 마크업을 살아남을 수 있을 만큼 충분히 관용적인 파서를 갖게 되면,변환은 지루하고 믿을 수 있습니다 - 정확히 당신이 원하는 것입니다. 나는 [Toolz.dev](/를 구축하고 브라우저 기반 넣어 HTML에서 Markdown 변환기로 이러한 규칙이 적용되지만 이 가이드는 규칙 자체에 관한 것이므로 출력이 어떻게 보이고 그 이유를 이해할 수 있습니다.
TL;DR: HTML 을 Markdown 으로 변환하려면,블록 요소를 그들의 Markdown 등가물로 매핑한다 (
<h2>→##,<ul><li>→-,<blockquote>→>,<pre><code>→ 울타리가 있는 블록), 인라인 요소(지도<strong>→**,<em>→*,<a>→[text](href),<img>→), 회전하다<table>github Flavored Markdown 파이프 테이블에 HTML 엔터티를 다시 실제 문자로 디코딩하고 삭제합니다<script>/<style>. 닫히지 않은 태그에 대한 허용 오차를 사용하는 파서를 사용하고 브라우저에서 수행하여 콘텐츠가 업로드되지 않도록 하세요.
왜 HTML을 마크다운으로 변환합니까?
Markdown 은 현대 개발자 웹의 휴대용 형식입니다. README 파일,문서 사이트,정적 블로그 (Hugo,Jekyll, Astro,Next.js 콘텐츠), Obsidian 및 Bear 와 같은 메모 앱,GitHub 문제,그리고 점점 더 AI 모델에 제공하는 프롬프트 및 컨텍스트 - 모두 Markdown 을 사용합니다. It's 일반 텍스트,Git 에서 깔끔하게 diffs,그리고 프레젠테이션 마크업 더미를 함께 끌지 않고 한 시스템에서 다른 시스템으로 이동되는 동안 살아남습니다.
대조적으로 HTML은 바로 당신입니다 로 끝내다 콘텐츠가 브라우저나 WYSIWYG 편집기를 통과할 때마다. 웹 페이지에서 섹션을 복사하고,CMS 에서 내보내고,API 에서 기사의 본문을 가져오거나,리치 텍스트 필드에서 포맷된 텍스트를 가져오면 HTML - 일반적으로 깔끔한 문서에서 원하는 래퍼 요소와 인라인 스타일로 가득 찬 어수선한 HTML 변환은 프레젠테이션 마크업"에 갇힌 "content 에서 "content 로의 브리지입니다."
시나리오는 지속적으로 당신이 그들을 통지하면 반복. 워드 프레스 또는 매체 떨어져 블로그를 마이그레이션. 레거시 HTML 도움말 시스템에서 문서를 꺼내. 마크 다운 노트로 스크랩 된 기사를 선회. 이메일 뉴스 레터 변환's HTML 마크 다운 초안. 웹 페이지 공급's 토큰을 낭비 원시 HTML 대신 깨끗한 컨텍스트로 LLM 에 콘텐츠 <div> 수프. 모든 경우에 수동 대안 - 다시 입력,또는 복사 - 렌더링 된 텍스트를 붙여넣고 손으로 서식을 다시 작성 - 느리고 손실입니다. 규칙 기반 변환기는 둘 다 아닙니다.
HTML은 어떻게 Markdown에 매핑됩니까?
매핑은 자연스럽게 두 개의 레이어로 분할됩니다: 블록 수준 구조와 인라인 포맷.
요소 차단 document's 골격을 정의하고,각각은 직접적인 Markdown 대응물을 갖는다:
<h1>-<h6>되다#통해######제목 줄.<p>빈 줄로 구분된 단락이 됩니다.<ul>/<li>되다-글머리 기호 목록;<ol>/<li>되다1.번호가 매겨진 목록과 중첩된 목록은 두 공백으로 들여쓰기됩니다.<blockquote>각 줄에 접두사를 붙입니다>.<hr>된다---.<pre><code>트리플 백틱이 있는 울타리 코드 블록이 됩니다.<table>github Flavored Markdown 파이프 테이블이 됩니다.
인라인 요소 해당 블록 내에서 텍스트를 장식하세요:
<strong>그리고<b>되다**bold**.<em>그리고<i>되다*italic*.<code>된다`inline code`.<a href="...">된다[link text](href), 유지합니다title존재할 때 속성.<img>된다.<del>그리고<s>되다~~strikethrough~~(github Flavored Markdown 확장).<br>개행 앞에 두 개의 후행 공간인 강경선 중단이 됩니다.
HTML 의 실제 블록에 대해 그 규칙을 실행하고 구조는 그대로 살아남습니다. 이 입력이 주어지면:
<article>
<h1>Getting Started</h1>
<p>Convert <strong>HTML</strong> into clean <em>Markdown</em>.</p>
<ul>
<li>Paste from a CMS</li>
<li>Get portable output</li>
</ul>
<pre><code class="language-js">const md = convert(html)</code></pre>
</article>
당신은 얻는다:
# Getting Started
Convert **HTML** into clean *Markdown*.
- Paste from a CMS
- Get portable output
```js
const md = convert(html)
```
그 출력에서 두 가지 세부 사항을 불러낼 가치가 있습니다. 첫째, <article> 래퍼는 아무것도 기여하지 않았습니다. 구조용 용기와 같습니다 <article>, <section>, 그리고 <div> 투명하다; 변환기는 그들 안으로 재귀하고 그들의 아이들을 블록으로 렌더링한다. 둘째,코드 울타리가 집어 들었다 js 그것의 언어로. That's 때문에 <code> 요소가 운반되었습니다 class="language-js"를, 컨벤션 구문 형광펜을 사용하고, 좋은 변환기는 울타리를 레이블로 그 클래스를 읽습니다. It's는 당신의 docs 사이트에 강조 코드 블록과 does't 하나의 차이를 만드는 작은 것입니다.
변환기가 실제 HTML에서 살아남게 만드는 이유는 무엇입니까?
위의 규칙은 쉬운 부분입니다. 손으로 굴린 regex 변환기가 실패하는 이유 - 그리고 I & # 39;ve 는 몇 가지를 쓰고 버렸습니다 - 실제 HTML 은 가정을 끊임없이 깨뜨립니다. 세 가지 문제가 계속해서 발생합니다.
닫히지 않은 태그. 브라우저는 용서하는 것으로 유명합니다: <p>one<p>two a 때문에 두 단락으로 렌더링합니다 <p> 다른 블록 요소가 열리면 암시적으로 닫힙니다 <li>a<li>b 는 같은 이유로 두 개의 목록 항목입니다. explicit 에서만 요소를 닫는 순진한 파서입니다 </p> 첫 번째 문단 안에 두 번째 문단을 중첩하고 모든 것을 다운스트림으로 망글링합니다. 견고한 변환기는 HTML spec 이 정의하는 것과 동일한 암시-끝-태그 규칙을 적용합니다: 블록 수준 요소를 열면 열린 문단이 닫힙니다; a 를 열면 <li> 이전 하나를 닫습니다. 내 변환기는이 작업을 수행,왜 엉성한 CMS 출력을 붙여 넣기 일반적으로 그냥 작동.
<script> 그리고 <style> 블록. 여기에는 콘텐츠가 아닌 코드와 CSS가 포함되어 있으며 해당 콘텐츠는 그대로 받아들여야 합니다(a < 내부 자바 스크립트는 태그가 아닙니다) 그리고 나서 완전히 떨어졌다. 그들을 특수 케이스에 잊어 버리면 마크 다운에 자바 스크립트 소스 출혈을 얻을.
HTML 엔터티. 웹 콘텐츠가 산재해 있습니다 &, ©, —, 및 숫자 참조와 같습니다 ’. 일반 텍스트인 Markdown에서 실제 문자를 원합니다: &, ©, —그리고 실제 아포스트로피입니다. 명명된 엔터티와 숫자 엔터티를 디코딩하는 것은 선택 사항이 아닙니다; 건너뛰면 깨끗한 Markdown이 보기 소스처럼 읽혀집니다.
이것이 제가 HTML 을 find-and-replace 로 변환하려는 시도를 멈추고 대신 적절한 허용 파서를 구축한 이유입니다. HTML 을 트리로 토큰화합니다 - 주석 처리,void 요소 같은 것 <br> 그리고 <img>대문자 태그 이름,그리고 인용되지 않은 속성 - 그리고 마크 다운을 방출 그 트리를 산책. 특히,그것은 does't browser's DOM 에 의존,같은 논리는 서버에서도 실행 의미하지만,당신을위한 실질적인 보상은 간단합니다: 그것은 does't 실제 웹 사이트가 만들어 지저분한 마크 업에 던져.
컨버터는 어떻게 사용하나요?
에 Toolz.dev/tools/html-to-markdown를,왼쪽 창에 HTML 을 붙여넣고 입력할 때 오른쪽에 마크다운이 나타납니다 - there's 업로드 및 검색할 변환 버튼이 없습니다. 지원되는 모든 구성을 한 번에 보고 싶다면 샘플을 로드합니다.
몇 가지 옵션은 일반적인 환경 설정을 커버. 당신의 총알 문자를 선택 (-, *, 또는 +) 순서가 지정되지 않은 목록이 프로젝트와 일치하도록 's 스타일. 테이블 및 취소선에 대해 GitHub Flavored Markdown 을 유지하거나 대상이 CommonMark 만 허용하는 경우 끄십시오. "keep links" off 산문을 원하지만 URL 을 원하지 않을 때 - 링크가 많은 기사를 깨끗한 읽기 텍스트로 바꾸는 데 편리합니다 - 및 "keep images" off 를 사용하여 이미지를 완전히 제거합니다. 통계 행에는 단어,제목, 링크,이미지, 코드 블록 및 예상 읽기 시간이 표시되며,이는 결과를 어딘가에 붙여 넣기 전에 구조가 발견되었다는 빠른 온전한 확인입니다.
사이트의 모든 것과 마찬가지로 변환은 100% 클라이언트 측입니다. 파서는 브라우저에서 실행되는 일반 JavaScript이므로 붙여 넣은 페이지,내부 문서 및 게시되지 않은 초안은 아무데도 전송되지 않습니다. That's 콘텐츠 작업에 적합한 기본값 - 다시 포맷하기 위해 stranger't 에 초안을 업로드해야 합니다. 그리고 이는 도구가 오프라인으로 계속 작동한다는 것을 의미합니다. 브라우저 측 처리가 왜 중요한지 자세히 설명합니다 데이터 개인 정보 보호 도구 가이드.
HTML 대 Markdown: 언제 어떤 것을 사용할 것인가
그들 사이를 전환하는 것은 쉽습니다; 당신이 원하는 것이 무엇인지 아는 것이 진정한 결정입니다.
| 측면 | HTML | 마크다운 |
|---|---|---|
| 주요 목적 | 브라우저에서 렌더링 | 텍스트 작성 및 저장 |
| 소스로서의 가독성 | 가난한 (태그 무거운) | 우수함(일반 텍스트로 읽음) |
| Git 차이점 | 시끄러운 | 깨끗하게 하다 |
| 시스템 전반의 이식성 | 낮은 | 높은 |
| 정밀한 레이아웃 제어 | 전체 | 디자인에 의해 제한 |
| 그것이 사는 곳 | 웹 페이지, WYSIWYG 출력 | README, 문서, 메모, 정적 사이트 |
| 학습 곡선 | 가파른 | 분 |
Markdown 은 의도적으로 레이아웃 제어를 단순화를 위해 거래하므로 작성,버전 및 이동 중인 콘텐츠에 대해 승리하고 픽셀 수준의 프레젠테이션이 필요할 때 손실됩니다. HTML 을 Markdown 으로 변환하면 you're 캡처 또는 마이그레이션 콘텐츠; you're building a. 때 HTML을 유지하십시오 페이지. 그리고 당신이 다른 방법을 갈 필요가 있을 때 - CMS 분야 또는 이메일 템플렛을 위한 HTML 로 Markdown - the HTML 변환기로 마크다운 는 이 도구의 거울상이며 동일한 규칙을 공유하므로 두 왕복은 공통 구조에 대해 깔끔하게 이루어집니다.
이것이 콘텐츠 워크플로에 적합한 경우
형식 변환은 거의 전체 작업; it's 한 단계. 내가 Markdown I'll 에 기사를 변환 한 후 일반적으로 a 를 통해 텍스트를 실행 합니다 단어 카운터 대상에 대한 길이를 확인하고 소스에 다른 대상에 대해 다시 인코딩해야 하는 HTML 엔터티가 있는 경우 HTML 엔터티 인코더/디코더 역방향을 처리합니다. 변환 전에 I'm 이 손으로 쓴 HTML 을 정리할 때,an HTML 축소기 먼저 노이즈를 제거합니다. 이 작은 도구들은 반복 가능한 파이프라인으로 서로 연결되어 있습니다. 이것이 제가 브라우저 기반 툴킷에 대해 생각하는 방식의 전체 아이디어입니다. 저는 그 철학을 다음과 같이 설명했습니다 웹 개발자 툴킷 가이드 그리고 더 넓습니다 코딩 도구 가이드.
HTML을 Markdown으로 변환하는 일반적인 실수
HTML을 변환하는 대신 렌더링된 텍스트를 복사하여 붙여넣습니다. 당신은 링크, 제목, 목록 - 모든 구조를 잃게됩니다. 실제 마크 업을 변환합니다.
코드 언어 클래스를 무시합니다. 울타리가있는 블록이 언어없이 나오고 don & # 39;t 하이라이트가 있으면 변환기는 를 떨어 뜨 렸습니다 class="language-x" 힌트. 좋은 것은 그것을 읽습니다.
CommonMark와 GFM이 동일하다고 가정합니다. 테이블과 취소선은 핵심 CommonMark 가 아닌 GitHub Flavored Markdown 확장입니다. 대상이 엄격한 CommonMark 인 경우 테이블 won't 렌더링 - GFM 꺼짐으로 변환하고 테이블을 다른 방법으로 처리합니다.
콘텐츠를 업로드하는 변환기를 신뢰합니다. "free"의 많음 온라인 변환기는 서버에 당신의 HTML 를 포스트한다. 간행되지 않는 무엇이든을 위해 또는 내부,that's 누출. 클라이언트 측 공구를 이용하십시오.
자주 묻는 질문
HTML을 마크다운으로 변환하려면 어떻게 해야 합니까?
HTML 을 편집기에 붙여 넣으면 마크 다운이 즉시 나타납니다 - 업로드 할 파일이없고 눌러야 할 변환 버튼이 없습니다. 원하는 경우 글머리 기호 스타일이나 링크 처리를 조정 한 다음 마크 다운을 복사하거나.md 파일로 다운로드하십시오.
변환기가 테이블을 처리합니까?
예. GitHub Flavored Markdown이 활성화된 상태에서 HTML이 제공됩니다 는 마크다운 파이프 테이블로 바뀝니다: 첫 번째 행은 헤더가 되고, 분배기 행은 삽입되며, 나머지 행은 본문이 됩니다. 셀 내부의 파이프 문자는 이스케이프되어 테이블을 깨지 않습니다.
링크와 이미지는 어떻게 됩니까?
닻이 됩니다 [링크 텍스트](href) 그리고 이미지가 됩니다 는,제목 속성을 보존하는 것은 있을 때. "keep links"를 끄면 앵커 텍스트는 유지되지만 URL 은 삭제되고, "keep images"는 이미지를 완전히 제거합니다 - 산문만 원할 때 유용합니다.
코드 블록과 인라인 코드가 보존됩니까?
예. ᅡ block becomes a fenced code block, and if the code element carries a class like "language-js" that language is added to the fence. Inline spans are wrapped in backticks, and the code text itself is never escaped or reformatted, so snippets stay exactly as written.
Will it work on messy HTML copied from a website?
That is what it is built for. The parser is tolerant of unclosed tags, uppercase element names, unquoted attributes and stray comments, and it strips