Skip to main content

HTML zu Markdown

HTML in sauberen Markdown-Text konvertieren.

Geprüft von · Zuletzt geprüft

So verwendest du den HTML-zu-Markdown-Konverter

  1. Füge HTML in den Eingabebereich ein. Ein Blogpost aus einem CMS kopiert, ein Auszug aus einem Notion-Export, eine gerenderte E-Mail oder die HTML-Ansicht einer Dokumentationsseite funktionieren alle.
  2. Sieh das Markdown auf der rechten Seite erscheinen, während du tippst. Überschriften, Inline-Formatierung, Links, Bilder, Codeblöcke, Listen und Blockzitate werden in einem Durchlauf konvertiert.
  3. Kopiere das Markdown mit der Zwischenablagentaste. Die Ausgabe ist Klartext, den jeder CommonMark- oder GitHub Flavored Markdown-Parser akzeptiert.
  4. Füge in dein Ziel ein - ein README, ein Obsidian-Vault, eine Hugo-Inhaltsdatei oder ein GitHub-Issue. Prüfe in deinem Ziel-Tool in der Vorschau, da Dialektunterschiede (Tabellen, Aufgabenlisten) das Rendering beeinflussen können.

Wie die Konvertierung funktioniert

Der Konverter parst das eingefügte HTML mit dem nativen DOMParser des Browsers, der einen echten DOM-Baum erzeugt, statt auf fehleranfällige Regex zu setzen. Ein rekursiver Walk besucht jeden Knoten, gibt das passende Markdown-Token für seinen Tag-Namen aus und wiederholt sich für Kinder. Überschriften werden in ATX-Form gemappt (# bis ######), <strong> und <b> werden zu **fett**, <em> und <i> werden zu *kursiv*, <a> wird zu [Text](URL) und <img> wird zu ![alt](src).

Code wird besonders behandelt. Inline-<code> wird in einfache Backticks eingeschlossen, aber wenn der Inhalt selbst einen Backtick enthält, verwendet der Konverter einen längeren Zaun (doppelt oder dreifach) gemäß der CommonMark-Empfehlung. <pre><code>-Blöcke verwenden dreifache Backtick-Zäune mit einem Sprach-Hinweis, der aus Klassennamen wie language-python extrahiert wird. Listen gehen rekursiv durch, sodass verschachtelte geordnete und ungeordnete Listen korrekt eingerückt werden. Blockzitate stellen jedem Zeile > voran. <script>- und <style>-Teilbäume werden vollständig übersprungen, weil das Einbeziehen ihres Textes ungültiges Markdown produzieren würde.

Wann du konvertieren solltest

  • Migration von Inhalten aus einem alten CMS (WordPress, Drupal, Ghost) in einen Git-basierten statischen Website-Generator wie Hugo oder Astro.
  • Kopieren eines Artikels von einer Webseite in eine Markdown-Notiz-App (Obsidian, Bear, Logseq), ohne die Struktur zu verlieren.
  • Konvertieren einer Rich-Text-E-Mail in Markdown zum Einfügen in GitHub-Issues oder Linear-Kommentare.
  • Extrahieren von Dokumentation aus einer gerenderten Hilfe-Seite, um ein README zu befüllen.
  • Vorbereiten eines Referenz-Snippets für eine Stack-Overflow-Antwort, bei der Markdown das erforderliche Eingabeformat ist.
  • HTML in ein Markdown-basiertes CMS-Import-Tool einspeisen, das strukturierten Text statt Tag-Suppe erwartet.

Randfälle

  • Verschachtelte Inline-Formatierung. Fett innerhalb von kursiv (<em><strong>Text</strong></em>) wird zu ***Text***. Einige Parser rendern das unterschiedlich, also prüfe in der Ziel-Engine.
  • Tabellen. HTML-Tabellen passen nicht sauber zu CommonMark, das keine Tabellensyntax hat. GFM-Tabellen werden in vielen Renderern unterstützt; dieser Konverter produziert derzeit einen Klartext-Tabellen-Fallback. Komplexe Tabellen (zusammengeführte Zellen, Row-Spans) verlieren die Struktur.
  • Bilder mit umschließenden Links. <a><img></a> wird zu [![alt](src)](url), was jeder Markdown-Renderer unterstützt.
  • Inline-HTML in Markdown. CommonMark erlaubt rohe HTML-Blöcke in der Markdown-Ausgabe. Wenn du einen iframe oder ein benutzerdefiniertes Element beibehalten musst, gibt der Konverter ihn wörtlich aus, statt zu versuchen, ihn zu übersetzen.
  • Leerzeichen-sensitiver Inhalt. <pre>-Blöcke bewahren ihren Inhalt Byte für Byte, einschließlich führender Tabs oder abschließender Zeilenumbrüche. Diese können beeinflussen, wie spätere Absätze rendern; inspiziere die Ausgabe vor dem Einfügen.

CommonMark im Kontext

Markdown wurde 2004 von John Gruber als leichtgewichtiges Klartextformat eingeführt. Es war nie streng spezifiziert, was zu inkompatiblen Implementierungen führte (Markdown.pl vs. Pandoc vs. Discount vs. MultiMarkdown). CommonMark, 2014 auf commonmark.org stabilisiert, ist die moderne, standardsbasierte Interpretation. GitHub Flavored Markdown (GFM) baut auf CommonMark auf und fügt Tabellen, Aufgabenlisten, Durchgestrichenes und Autolinks hinzu - es ist der Dialekt, der in READMEs, Issues und Pull Requests auf GitHub verwendet wird. Dieser Konverter zielt auf CommonMark als gemeinsamen Nenner ab; GFM-spezifische Extras, die HTML-Fallback erfordern, rendern in CommonMark-only-Parsern identisch.

Erwähnenswerte Alternativen

pandoc ist der industriestarke Konverter: pandoc -f html -t markdown input.html produziert eine Ausgabe, die mehr Struktur bewahrt als jeder Regex- oder DOM-Walk-Ansatz, einschließlich Fußnoten, Tabellen und Definitionslisten. turndown ist das JavaScript-Äquivalent und ist ausgezeichnet, wenn du die Konvertierung in ein Build-Skript integrieren möchtest; es unterstützt auch benutzerdefinierte Regeln für Element-zu-Markdown-Mapping. Browser-Erweiterungen wie Markdownload automatisieren den "Lies diesen Artikel, speichere als Markdown"-Workflow. Wähle dieses In-Browser-Tool, wenn du ein sofortiges Ergebnis ohne Installation von etwas benötigst; wähle pandoc, wenn die Eingabe eine ungewöhnliche Struktur hat, die es wert ist, genau zu bewahren.

Häufig gestellte Fragen

Auf welchen Markdown-Dialekt zielt die Ausgabe ab?

CommonMark, der moderne standardisierte Dialekt, dokumentiert auf commonmark.org. Überschriften verwenden ATX-Form (<code>#</code>), eingezäunte Codeblöcke verwenden dreifache Backticks, und die Link-Syntax entspricht der <code>[Text](URL)</code>-Form. GFM-spezifische Funktionen wie Aufgabenlisten und Tabellen werden opportunistisch behandelt, können aber auf strikten CommonMark-Parsern unterschiedlich gerendert werden. Für maximale Portabilität halte deine HTML-Struktur einfach und vermeide es, auf GFM-Erweiterungen angewiesen zu sein.

Verwendet das Tool einen echten HTML-Parser oder Regex?

Echten Parser. Die Eingabe wird dem <code>DOMParser</code> des Browsers mit dem MIME-Typ <code>text/html</code> übergeben, was denselben DOM-Baum erzeugt, den ein Browser rendern würde. Ein Tiefendurchlauf gibt dann Markdown-Token für jedes Element aus. Dieser Ansatz behandelt verschachtelte Strukturen, implizite Tag-Schließung und ungewöhnliche Attribut-Anführungszeichen korrekt - Situationen, in denen ein Regex-basierter Konverter stillschweigend Inhalt fallen lassen oder fehlerhafte Ausgabe produzieren würde.

Sind <code>&lt;script&gt;</code>- und <code>&lt;style&gt;</code>-Blöcke im Markdown enthalten?

Nein. Der Walker überspringt diese Elemente explizit, weil das Ausgeben ihres Textes JavaScript oder CSS in dein Markdown injizieren würde, das jeder vernünftige Renderer als Klartext behandelt - und laute Absätze produziert, die den Inhalt verunreinigen. Das ist besonders nützlich beim Einfügen einer ganzen HTML-Seite, bei der der <code>&lt;head&gt;</code> Analytics-Snippets enthält, die du nicht in deinem README haben möchtest.

Wird mein Inhalt irgendwohin hochgeladen?

Nein. <code>DOMParser</code> ist eine synchrone In-Process-API, und der Markdown-Walk ist ein lokaler Funktionsaufruf. Während der Konvertierung wird keine fetch-Anfrage gestellt, kein WebSocket geöffnet und nichts in localStorage oder IndexedDB gespeichert. Der eingefügte Inhalt und das kopierte Markdown leben nur im JavaScript-Speicher und werden beim Schließen des Tabs freigegeben.

Wie werden Tabellen behandelt?

Einfache Tabellen mit <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code> und <code>&lt;td&gt;</code> werden in die GitHub Flavored Markdown-Tabellensyntax mit Pipe-Trennzeichen und einer gestrichelten Trennzeile umgewandelt. Tabellen, die Row-Spans oder Column-Spans verwenden, können nicht in GFM-Syntax ausgedrückt werden, daher verlieren diese den Span und geben ein flaches Raster aus. Wenn deine Quelle komplexe Tabellen hat, erwäge, diese als HTML innerhalb der Markdown-Ausgabe zu behalten (sowohl CommonMark als auch GFM erlauben rohe HTML-Blöcke).

Wird der Alt-Text von Bildern beibehalten?

Ja. Das <code>alt</code>-Attribut wird von jedem <code>&lt;img&gt;</code> gelesen und in die <code>![alt](src)</code>-Klammern gesetzt. Bilder ohne Alt-Text (Barrierefreiheits-Antipattern, leider verbreitet) geben <code>![](src)</code> aus, was gültiges Markdown ist, aber ohne Bildunterschrift rendert. Füge nach der Konvertierung bedeutsamen Alt-Text hinzu, falls er in der Quelle fehlte.

Was passiert mit Inline-Links, die Query-Strings oder Klammern enthalten?

CommonMark verlangt, dass URL-Sonderzeichen innerhalb von Klammern entweder URL-kodiert oder in spitze Klammern eingeschlossen werden. Ein Link wie <code>[klicke](https://a.com/(pfad))</code> ist für Parser mehrdeutig; der Konverter URL-kodiert die inneren Klammern zu <code>%28</code> und <code>%29</code>. Query-Strings mit <code>?</code>, <code>&amp;</code> und <code>=</code> werden unverändert übernommen, da sie in der Link-Syntax sicher sind.

Kann ich eine gesamte HTML-Seite einschließlich Head und Navigation konvertieren?

Ja, aber die Ausgabe enthält alles einschließlich Menüs, Fußzeilen und Metadaten. Wenn du nur den Artikel-Body möchtest, füge nur das relevante Fragment ein - zum Beispiel den Inhalt von <code>&lt;article&gt;</code> oder <code>&lt;main&gt;</code>. Der Readability-Algorithmus (verwendet von Firefox Reader View) ist der kanonische Weg, Artikelinhalt zu extrahieren; Browser-Erweiterungen wie Markdownload kombinieren diese Extraktion mit Markdown-Konvertierung in einem Schritt.

Wie werden eingezäunte Codeblöcke mit einer Sprache beschriftet?

Der Konverter liest das Klassen-Attribut des <code>&lt;code&gt;</code>-Elements innerhalb eines <code>&lt;pre&gt;</code>. Klassen, die <code>language-xxx</code>, <code>lang-xxx</code> oder nur <code>xxx</code> entsprechen (häufig von Hervorhebern wie Prism, Shiki und Rouge), werden erkannt. Der Sprach-Hinweis erscheint unmittelbar nach dem öffnenden dreifachen Backtick und lässt Syntax-Hervorheber in deinem Ziel-Renderer die korrekte Färbung anwenden.

Werden verschachtelte Listen korrekt eingerückt?

Ja. Jede Listenebene fügt vier Leerzeichen Einrückung hinzu, was die Standard-CommonMark-Regel für verschachtelte Listen ist. Ungeordnete Listen verwenden <code>- </code>-Markierungen und geordnete Listen verwenden <code>1. </code> bis <code>n. </code>. Eine verschachtelte geordnete Liste innerhalb einer ungeordneten Liste erzeugt eine Struktur wie <code>- Element\\n 1. Unterelement</code>, die CommonMark-Parser korrekt rendern.

Verwandte Tools

Mehr Text Tools

Binary to Text

Convert text to binary and binary back to text.

Open tool

Case Converter

Convert text between UPPER, lower, Title, Sentence, camelCase, snake_case and more.

Open tool

Character Counter

Count characters with platform-specific limits for Twitter, Instagram and more.

Open tool

Emoji Picker & Search

Search and copy emojis by name or category.

Open tool

Fancy Text Generator

Generate stylish text with bubbles, squares, upside down and more for social media.

Open tool

Find & Replace

Find and replace text with regex support and case-sensitive options.

Open tool
ZeroUtil unterstützen