Ich migriere Inhalte beruflich, in dem Sinne, dass jeder, der eine WordPress-Seite ein Jahrzehnt lang betrieben hat, irgendwann einmal eine Charge alter Beiträge aus einem Page Builder in ein Markdown-basiertes Doc-System verschoben hat, entdeckte ich, was & quot; sauberes HTML" wirklich in freier Wildbahn bedeutet: <p> Tags mit Inline-Stilen, leer <span>S Einwickeln einzelner Wörter <div>S drei Ebenen tief um einen Absatz, und das gelegentliche Tag, das einfach nie geschlossen wurde Das in ein Markdown-Feld einfügen gab mir eine Wand aus buchstäblichen Winkelklammern Kopieren-Einfügen der gerüttelt Text verlor jeden Link, jede Überschrift und jede Liste. Keine der Abkürzungen funktionierte und ich habe schließlich einen Nachmittag lang Artikel von Hand gereinigt, bevor ich mich darüber im Klaren war.
Vernünftig werden bedeutete, HTML-to-Markdown als das zu behandeln, was es ist: eine strukturierte Transformation mit einem klaren Regelwerk, nicht ein Copy-Paste Ein Überschriftenelement wird zum # Linie. Fett wird **. Ein Link wird [text](url). Aus einer Tabelle wird ein Pipe-Tisch Sobald man diese Mappings hat und einen Parser, der tolerant genug ist, um das reale Markup zu überstehen, ist die Konvertierung langweilig und zuverlässig - was genau das ist, was man will Ich baue [Toolz.dev] (/ und lege einen Browser-basierten HTML-zu-Markdown-Konverter Dort, das diese Regeln anwendet, aber in diesem Leitfaden geht es um die Regeln selbst, damit Sie verstehen, wie die Ausgabe aussehen sollte und warum.
tl; dr: Um HTML in Markdown zu konvertieren, ordnen Sie Blockelemente ihren Markdown-Äquivalenten zu (
<h2>→##,<ul><li>→-,<blockquote>→>,<pre><code>→ ein eingezäunter Block), Inline-Elemente kartieren (<strong>→**,<em>→*,<a>→[text](href),<img>→), wenden<table>Dekodieren Sie HTML-Entitäten wieder in echte Zeichen und lassen Sie sie in eine Markdown-Pipe-Tabelle mit GitHub-Flavored zurückfallen<script>/<style>. Verwenden Sie einen Parser, der nicht geschlossene Tags toleriert, und tun Sie dies im Browser, damit Ihre Inhalte nie hochgeladen werden.
Warum HTML überhaupt in Markdown konvertieren?
Markdown ist das portable Format des modernen Entwickler-Webs. README-Dateien, Dokumentationsseiten, statische Blogs (Hugo, Jekyll, Astro, Next.js-Inhalte), Notiz-Apps wie Obsidian und Bear, GitHub-Probleme und zunehmend die Eingabeaufforderungen und den Kontext, die wir an KI-Modelle weitergeben - alle sprechen Markdown. It's Klartext, es verbreitet sich sauber in Git und es überlebt, von einem System zum anderen verschoben zu werden, ohne einen Stapel Präsentationsmarkup mit sich zu ziehen.
Im Gegensatz dazu ist HTML das, was Sie tun Am Ende mit Immer wenn Inhalte durch einen Browser oder einen WYSIWYG-Editor gehen Kopieren Sie einen Abschnitt von einer Webseite, exportieren Sie von einem CMS, ziehen Sie den Hauptteil eines Artikels aus einer API oder greifen Sie zu formatiertem Text aus einem Rich-Text-Feld, und Sie erhalten HTML - normalerweise vollgestopftes HTML, voll mit Wrapper-Elementen und Inline-Stilen, die Sie nicht in einem sauberen Dokument wünschen Die Konvertierung ist die Brücke von & quot; Inhalt, der in der Präsentation markup" eingeschlossen ist. zu " Inhalt Ich kann überall versionieren, bearbeiten und neu veröffentlichen. "
Die Szenarien kehren ständig wieder, sobald Sie sie bemerken Migrieren eines Blogs von WordPress oder Medium Ziehen von Dokumentation aus einem alten HTML-Hilfesystem Verwandeln eines abgekratzten Artikels in eine Markdown-Notiz Konvertieren eines E-Mail-Newsletters's HTML in einen Markdown-Entwurf Einspeisen einer Webseite's-Inhalte in einen LLM als sauberen Kontext anstelle von rohem HTML, das Token verschwendet <div> Suppe. In jedem Fall sind die manuellen Alternativen - Retyping, oder Copy-Pasting gerenderten Text und Neuaufbau der Formatierung von Hand - langsam und verlustbehaftet Ein regelbasierter Konverter ist weder.
Wie wird HTML Markdown zugeordnet?
Die Abbildung teilt sich auf natürliche Weise in zwei Schichten: Struktur auf Blockebene und Inline-Formatierung.
Blockelemente Definieren Sie das Dokument's-Skelett und jedes hat ein direktes Markdown-Gegenstück:
<h1>–<h6>Werden#durchgehend######Kurslinien.<p>Absatz wird, der durch Leerzeilen getrennt ist.<ul>/<li>Werden-Aufzählungslisten;<ol>/<li>Werden1.Nummerierte Listen und verschachtelte Listen werden durch zwei Leerzeichen eingekerbt.<blockquote>Präfixe jeder Zeile mit>drohen<hr>wird---drohen<pre><code>Ein eingezäunter Codeblock mit dreifachem Backtick wird.<table>Wird zu einem Markdown-Rohrtisch mit GitHub-Geschmack.
Inline-elemente Text innerhalb dieser Blöcke dekorieren:
<strong>und<b>Werden**bold**drohen<em>und<i>Werden*italic*drohen<code>wird`inline code`drohen<a href="...">wird[link text](href)Behalten Sie dietitleAttribut, wenn vorhanden.<img>wirddrohen<del>und<s>Werden~~strikethrough~~(eine GitHub Flavored Markdown-Erweiterung).<br>Wird zu einem harten Linienbruch - zwei hintere Felder vor der neuen Linie.
Führen Sie diese Regeln über einen echten HTML-Block aus und die Struktur bleibt intakt. Angesichts dieser Eingabe:
<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>
Sie bekommen:
# Getting Started
Convert **HTML** into clean *Markdown*.
- Paste from a CMS
- Get portable output
```js
const md = convert(html)
```
Zwei Details in dieser Ausgabe sind es wert, aufgerufen zu werden. Erstens, die <article> Wrapp trug nichts bei - Strukturbehälter wie <article>, <section>, und <div> Transparent sind; der Konverter kehrt in sie zurück und macht ihre Kinder zu BlöckenZweit hat der Codezaun aufgenommen js Als seine Sprache That's weil die <code> Element getragen class="language-js"„Die Convention-Syntax-Highlighter verwenden diese Klasse, um den Zaun zu kennzeichnen. It's ist eine kleine Sache, die den Unterschied zwischen einem Codeblock, der auf Ihrer Docs-Website hervorhebt, und einem, der dies tut, macht. 't.
Was macht einen Konverter dazu, real-welt-HTML zu überleben?
Die Regeln oben sind der einfache Teil Der Grund, warum handgerollte Regex-Konverter versagen - und I & #39; ein Paar geschrieben und weggeworfen haben - ist, dass echtes HTML ständig Annahmen bricht Immer wieder kommen drei Probleme auf.
Nicht geschlossene Tags. Browser sind bekanntermaßen nachsichtig: <p>one<p>two Wird als zwei Absätze gerendert, weil a <p> Wird implizit geschlossen, wenn ein anderes Blockelement geöffnet wird, und <li>a<li>b Ist aus dem gleichen Grund zwei Listenelemente Ein naiver Parser, der nur Elemente auf einem expliziten </p> Wird den zweiten Absatz in den ersten einfügen und alles nachgeschaltet verstümmeln. Ein robuster Konverter wendet die gleichen impliziten End-Tag-Regeln an, die die HTML-Spezifikation definiert: Das Öffnen eines Elements auf Blockebene schließt einen offenen Absatz; Öffnen eines <li> Schließt den vorherigen Mein Konverter macht das, weshalb das Einfügen von schlampigem CMS-Ausgang meist einfach funktioniert.
<script> und <style> Blöcke. Diese enthalten Code und CSS, keinen Inhalt, und ihr Inhalt muss wörtlich genommen werden (a < Inside JavaScript ist kein Tag) und dann ganz fallen gelassen Vergessen Sie, sie in Sonderfällen zu fassen, und Sie erhalten JavaScript-Quellblutung in Ihrem Markdown.
HTML-Entitäten. Webinhalte sind übersät mit &, ©, —, und numerische Referenzen wie ’. In Markdown - das ist Klartext - wollen Sie die eigentlichen Zeichen: &, ©, —‘und ein echter Apostroph. Die Dekodierung benannter und numerischer Entitäten ist nicht optional; überspringen Sie es und Ihr sauberer Markdown liest sich wie eine Ansichtsquelle.
Aus diesem Grund habe ich aufgehört, HTML mit find-and-replace zu konvertieren und stattdessen einen richtigen toleranten Parser erstellt. Es tokenisiert das HTML in einen Baum - der Kommentare verarbeitet, leere Elemente wie <br> und <img>, groß geschriebene Tag-Namen und nicht zitierte Attribute - und läuft dann diesen Baum, der Markdown aussendet. Bemerkenswert ist, dass es & #39; nicht auf dem Browser basiert. & #39;s DOM, was bedeutet, dass die gleiche Logik auch auf einem Server ausgeführt wird, aber die praktische Auszahlung für Sie ist einfach: Es tut #39; Wirf nicht auf das chaotische Markup, aus dem echte Websites bestehen.
Wie verwende ich den Konverter?
Auf Toolz.dev/tools/html-to-markdown, fügen Sie Ihr HTML in den linken Bereich ein und der Markdown erscheint rechts, während Sie eingeben - dort' s kein Upload und kein Konvertieren-Button zum Jagen Laden Sie das Sample, wenn Sie jedes unterstützte Konstrukt auf einmal sehen möchten.
Ein paar Optionen decken die gängigen Präferenzen ab Wählen Sie Ihren Bullet-Charakter (-, *, oder +) für ungeordnete Listen, die Ihrem Projekt entsprechen' s-Stil. Halten Sie GitHub Flavored Markdown für Tabellen und durchgestrichen an oder deaktivieren Sie es, wenn Ihr Ziel nur CommonMark akzeptiert. Schalten Sie & quot; halten Sie Links" aus, wenn Sie die Prosa, aber nicht die URLs wünschen - praktisch, um einen linklastigen Artikel in sauberen Lesetext umzuwandeln - und & quot; halten Bilder" ab, um Bilder vollständig zu streifen Die Statistikzeile zeigt Wörter, Überschriften, Links, Bilder, Codeblöcke und eine geschätzte Lesezeit, was eine schnelle Bereinigung ist Überprüfen Sie, ob die Struktur rübergekommen ist, bevor Sie das Ergebnis irgendwo einfügen.
Wie bei allem auf der Seite ist die Konvertierung 100% clientseitig Der Parser ist einfaches JavaScript, das in Ihrem Browser ausgeführt wird, sodass eingefügte Seiten, interne Dokumentation und unveröffentlichte Entwürfe niemals irgendwo gesendet werden. That' ist die richtige Voreinstellung für die Inhaltsarbeit - Sie sollten & #39; keinen Entwurf auf einen fremden & #39; s-Server hochladen müssen, nur um ihn neu zu formatieren - und es bedeutet, dass das Tool weiterhin offline funktioniert Ich gehe tiefer darauf ein, warum die browserseitige Verarbeitung im Handbuch zum Datenschutzdrohen
HTML vs. Markdown: Wann welches verwendet werden soll
Die Konvertierung zwischen ihnen ist einfach; Zu wissen, was Sie wollen, ist die eigentliche Entscheidung.
| Aspekt | HTML | Markdown |
|---|---|---|
| Hauptzweck | Rendern in einem Browser | Schreiben und Speichern von Text |
| Lesbarkeit als Quelle | Arm (taglastig) | Ausgezeichnet (liest sich als Klartext) |
| Gitdiffs | Lärm | Sauber |
| Systemübergreifende Portabilität | Niedrig | Hoch |
| Präzise Layoutsteuerung | Voll | Durch die Bauart eingeschränkt |
| Wo es lebt | Webseiten, WYSIWYG-Ausgabe | READMEs, Dokumente, Notizen, statische Websites |
| Lernkurve | Steil | Minuten |
Markdown tauscht bewusst Layoutsteuerung aus Gründen der Einfachheit, weshalb es für Inhalte gewinnt, die Sie schreiben, versionieren und bewegen, und verliert, wenn Sie eine Präsentation auf Pixelebene benötigen HTML in Markdown konvertieren, wenn Sie & #39; erneut erfassen oder migrieren Inhalt; HTML behalten, wenn Sie & #39;re ein bauen Seite. Und wenn Sie in die andere Richtung gehen müssen - Markdown in HTML für ein CMS-Feld oder eine E-Mail-Vorlage - wird die Markdown in HTML-Konverter Spiegelbild dieses Werkzeugs ist und die gleichen Konventionen teilt, so dass die beiden Hin- und Rückfahrten sauber für gemeinsame Strukturen sind.
Wo dies in einen Content-Workflow passt
Die Formatkonvertierung ist selten der ganze Job; it' s ein Schritt. Nachdem ich einen Artikel in Markdown konvertiert habe, führt I' normalerweise den Text durch eine Wortgegensatz Um die Länge anhand eines Ziels zu überprüfen, und wenn die Quelle HTML-Entitäten hatte, die für ein anderes Ziel zurückkodiert werden müssen, ist die HTML-Entitätskodierer/-dekodierer Handgriffe umgekehrt Wenn I & #39; m vor der Konvertierung handgeschriebenes HTML bereinigt, wird ein HTML-Minifier Lindert das Rauschen zuerst Diese kleinen Werkzeuge verketten sich zu einer wiederholbaren Pipeline, was die ganze Idee ist, die hinter meiner Meinung über ein browserbasiertes Toolkit steckt - ich habe diese Philosophie in der dargelegt Leitfaden für Webentwickler-Toolkit und je breiter Anleitung für die Coding-Toolsdrohen
Häufige Fehler bei der Konvertierung von HTML in Markdown
Kopieren Sie gerenderten Text, anstatt den HTML-Code zu konvertieren. Sie verlieren Links, Überschriften und Listen - die gesamte Struktur Konvertieren Sie das tatsächliche Markup.
Ignorieren der Code-Sprachklasse. Wenn Ihre eingezäunten Blöcke ohne Sprache und don' herauskommen. t Hervorhebung, der Konverter hat das gelöscht class="language-x" Hinweis. ein guter liest es.
Vorausgesetzt, CommonMark und GFM sind gleich. Tabellen und durchgestrichen sind GitHub Flavored Markdown-Erweiterungen, kein Kern-CommonMark. Wenn Ihr Ziel streng ist CommonMark, eine Tabelle won't rendern - konvertieren Sie mit GFM aus und handhaben Sie Tabellen auf andere Weise.
Vertrauen Sie einem Konverter, der Ihre Inhalte hochlädt. Reichlich & quot; free" Online-Konverter POSTEN Sie Ihr HTML auf einen Server Für alles Unveröffentlichte oder Interne, das & #39; s ein Leck Verwenden Sie ein clientseitiges Tool.
FAQ
Wie konvertiere ich HTML in Markdown?
Fügen Sie Ihr HTML in den Editor ein und der Markdown erscheint sofort - es gibt keine Datei zum Hochladen und keinen Konvertieren-Button zum Drücken Passen Sie den Bullet-Stil oder die Link-Verarbeitung an, wenn Sie möchten, kopieren Sie dann den Markdown oder laden Sie ihn als 'md-Datei herunter.
Behandelt der Konverter Tabellen?
Ja. Mit aktiviertem GitHub Flavored Markdown, einem HTML In eine Markdown-Pipe-Tabelle verwandelt wird: die erste Zeile wird zum Header, eine Trennzeile wird eingefügt, und die restlichen Zeilen werden zum Body Pipe-Zeichen im Inneren von Zellen werden entwischt, damit sie die Tabelle nicht aufbrechen.
Was passiert mit Links und Bildern?
Anker werden [Linktext](href) und Bilder werden Bewahren des Titelattributs, wenn vorhanden Wenn Sie & quot; halten Links" beibehalten, wird der Ankertext beibehalten, aber die URL wird weggelassen, und Ausschalten von " Bilder beibehalten" entfernt Bilder vollständig - nützlich, wenn Sie nur die Prosa wollen.
Werden Codeblöcke und Inline-Code beibehalten?
Ja A 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