Markdown zu HTML

So verwendest du den Markdown-zu-HTML-Konverter

1. Füge Markdown ein oder tippe es in den Eingabebereich. Eine README, ein Blog-Entwurf, ein Notion-Export, eine GitHub-Wiki-Seite oder ein anderer CommonMark-kompatibler Text funktioniert.
2. Wechsle zwischen Tabs: HTML-Code zeigt das rohe generierte Markup; Vorschau zeigt, wie dieses Markup im Browser gerendert wird.
3. Klicke auf "HTML kopieren", um das generierte Markup in ein CMS, einen E-Mail-Template-Builder oder direkt in eine HTML-Datei einzufügen.
4. Iteriere live - das Tippen im Eingabebereich aktualisiert beide Ansichten bei jedem Tastendruck, sodass du genau siehst, wie dein Markdown auf HTML abgebildet wird.

Unter der Haube

Der Konverter implementiert den häufig genutzten Kern von CommonMark: Überschriften, Betonung, Listen, Links, Bilder, Code-Blöcke, Blockzitate und horizontale Linien. Er arbeitet zeilenweise für Konstrukte auf Block-Ebene (Überschriften, Listenpunkte, Zäune) und leitet dann den gesammelten Absatzinhalt durch einen Inline-Parser, der Betonung, Backtick-Spans, Links und Bilder verarbeitet. Diese Zwei-Pass-Architektur entspricht dem Aufbau jeder ernsthaften Markdown-Implementierung (cmark, markdown-it, pulldown-cmark).

Zur Sicherheit maskiert der Konverter Benutzer-HTML am Eingabepunkt, wenn es ein <script> oder ein anderes gefährliches Tag bilden könnte, anstatt rohes HTML vollständig durchzuleiten. Das Ergebnis ist dieselbe Ausgabe, die du von einem vernünftigen Standard-CommonMark-Renderer erhalten würdest: semantische HTML5-Elemente, keine Inline-Styles, keine Klassennamen. Füge Styling hinzu, indem du die Ausgabe in ein bestehendes Design-System einbettest - der Markdown-zu-HTML-Schritt ist absichtlich style-agnostisch. Neuere Patches schützen auch vor fehlerhafter Eingabe wie unbalancierten Bild-URLs, die zuvor zu Endlosschleifen führten.

Gute Anwendungsfälle

• Eine E-Mail in Markdown schreiben und in HTML konvertieren für eine Mailchimp- oder Brevo-Kampagne, die benutzerdefiniertes HTML akzeptiert.
• Eine Seite in Markdown im Editor entwerfen und HTML in ein CMS einfügen, das Markdown nicht direkt unterstützt.
• Eine Vorschau einer README-Änderung erstellen, bevor du den Commit pushst, besonders für GitHub-spezifische Funktionen.
• Den HTML-Teil einer Inhaltsdatei für einen Static-Site-Generator generieren, der sein eigenes Markdown-Rendering durchführt, du aber die Ausgabe vergleichen möchtest.
• Das innere HTML für einen Rich-Text-Editor erstellen, der HTML als Serialisierungsformat akzeptiert.
• Markdown-Syntax lehren, indem Schüler die Quell-zu-HTML-Zuordnung in Echtzeit sehen.

Worauf du achten solltest

• GFM-Erweiterungen. Aufgabenlisten - [ ], Tabellen mit Pipe-Syntax und Durchstreichen mit ~~text~~ sind GitHub Flavored Markdown-Erweiterungen. Der Kernkonverter unterstützt die gebräuchlichsten; obskure Erweiterungen werden möglicherweise nicht gerendert.
• HTML innerhalb von Markdown. CommonMark erlaubt rohe HTML-Blöcke. Diese werden durch den Konverter durchgeleitet, was bedeutet, dass sie in der Vorschau gerendert werden. Das ist mächtig, birgt aber XSS-Risiken, wenn das Markdown aus einer nicht vertrauenswürdigen Quelle stammt; halte die Ausgabe bereinigt, wenn du Eingaben von Benutzern akzeptierst.
• Setext- vs. ATX-Überschriften. Unterstrichene Überschriften (=== unter dem Text) werden neben dem #-Stil unterstützt. Manche ältere Markdown-Werkzeuge erzeugen Setext, daher werden beide Formen identisch konvertiert.
• Referenzstil-Links. Links der Form [text][ref] gefolgt von [ref]: url werden erkannt; die Referenzdefinition wird nicht als Text gerendert.
• Harte Zeilenumbrüche. Zwei abschließende Leerzeichen am Ende einer Zeile oder ein Backslash erzeugen ein <br> gemäß CommonMark. Einzelne Zeilenumbrüche innerhalb von Absätzen werden verbunden, was manchmal Personen überrascht, die von Plattformen kommen, wo jeder Zeilenumbruch zu einem Umbruch wird.

Die CommonMark-Spezifikation

CommonMark ist ein standardisierter Markdown-Dialekt, entwickelt von John MacFarlane und anderen, erstmals 2014 veröffentlicht und derzeit in Version 0.31.2. Die Spezifikation unter spec.commonmark.org enthält eine Referenzimplementierung (cmark) und eine umfassende Testsuite mit über 600 Fällen. Vor CommonMark hatte Markdown Dutzende inkompatibler Implementierungen; dieselbe Eingabe wurde auf Reddit, Stack Overflow, GitHub und Daring Fireball unterschiedlich gerendert. CommonMark reduziert diese Mehrdeutigkeit. GitHub Flavored Markdown ist als CommonMark plus einige Erweiterungen spezifiziert: Tabellen, Aufgabenlisten, Durchstreichen, Autolinks und deaktiviertes rohes HTML. GFM ist das, was du auf GitHub siehst, und ist am nächsten an einem "modernen Standard"-Markdown-Dialekt.

Alternativen

markdown-it ist die beliebteste JavaScript-Markdown-Bibliothek und wird intern von VS Code für die Vorschau verwendet. remark ist eine vollständige AST-basierte Toolchain, die dir erlaubt, Markdown vor dem Rendern zu transformieren. pandoc, in Haskell geschrieben, ist das Schweizer Taschenmesser: Markdown zu HTML, zu DOCX, zu PDF, zu LaTeX, alles aus einer Binärdatei. Für Static-Site-Generatoren verwendet Hugo Goldmark, Astro intern remark, und Next.js unterstützt MDX, das Markdown mit JSX kombiniert. Greife zu einer Build-Schritt-Bibliothek, wenn du Pipeline-Integration, benutzerdefinierte Plugins oder Syntax-Highlighting benötigst. Dieses Browser-Werkzeug ist für den Einzelfall gedacht, in dem du nur HTML aus einem Markdown-Snippet benötigst, ohne etwas installieren zu müssen.