Konverter
Markdown → HTML
Der Markdown-zu-HTML-Konverter wandelt Markdown-Syntax in valides HTML um und zeigt eine gerenderte Vorschau in Echtzeit. Unterstützt werden Standard-Markdown (CommonMark) sowie häufige Erweiterungen wie Tabellen, Fußnoten, Aufgabenlisten und Syntaxhervorhebung für Code-Blöcke. Zusätzlich bietet das Tool eine PDF-Druckfunktion, um das gerenderte Dokument direkt als PDF zu exportieren.
Was ist Markdown?
Markdown ist eine leichtgewichtige Auszeichnungssprache, die 2004 von John Gruber entwickelt wurde und darauf ausgelegt ist, als reiner Text gut lesbar zu sein und gleichzeitig in HTML konvertiert werden zu können. Markdown-Syntax umfasst Überschriften (# für H1, ## für H2 usw.), fett (**text**) und kursiv (*text*), Links ([Text](URL)), Bilder (), Code (Backticks), Blockzitate (>) und Listen (- oder 1.). Markdown ist das Standardformat für README-Dateien auf GitHub, für Dokumentationsgeneratoren (MkDocs, Docusaurus), für Wiki-Systeme (Confluence, Notion) und für statische Website-Generatoren. Die CommonMark-Spezifikation standardisiert die Markdown-Syntax.
Wie funktioniert das Tool?
Das Tool verwendet einen Markdown-Parser (z. B. marked.js oder remark), der den Markdown-Text in einen Abstract Syntax Tree (AST) überführt und daraus HTML generiert. Die Konvertierung erfolgt in Echtzeit mit jeder Eingabe. Code-Blöcke werden mit Syntax-Highlighting versehen (z. B. durch highlight.js oder Prism). Die HTML-Ausgabe wird in einem IFrame oder einem Shadow-DOM-Bereich als gerenderte Vorschau angezeigt. Für den PDF-Export wird die Browser-Druckfunktion mit angepassten CSS-Druckstilen aufgerufen, die eine druckoptimierte Darstellung erzeugen.
Typische Anwendungsfälle
- Erstellung von HTML-Inhalten aus Markdown für CMS-Systeme oder E-Mail-Templates
- Schnelle Vorschau von README-Dateien oder Dokumentation vor dem Git-Commit
- Konvertierung von Markdown-Notizen in druckbare PDF-Dokumente
- Prüfung, ob GitHub-Flavored-Markdown-Syntax wie Aufgabenlisten und Tabellen korrekt gerendert wird
Schritt-für-Schritt-Anleitung
- Schritt 1: Schreiben oder fügen Sie Markdown-Text in das Eingabefeld ein.
- Schritt 2: Die gerenderte HTML-Vorschau aktualisiert sich live auf der rechten Seite.
- Schritt 3: Wechseln Sie in die HTML-Ansicht, um den generierten HTML-Code zu kopieren.
- Schritt 4: Nutzen Sie die Druckfunktion, um das Dokument als PDF zu exportieren.
Beispiel
Eingabe
# Hallo Welt
Dies ist **fetter** und *kursiver* Text.
- Element 1
- Element 2
```javascript
console.log('Hallo');
```
Ausgabe
<h1>Hallo Welt</h1><p>Dies ist <strong>fetter</strong> und <em>kursiver</em> Text.</p><ul><li>Element 1</li><li>Element 2</li></ul><pre><code class="language-javascript">console.log('Hallo');
</code></pre>
Tipps & Hinweise
- Für GitHub-Flavored Markdown (GFM) sind Tabellen (| Spalte1 | Spalte2 |) und Aufgabenlisten (- [ ] Aufgabe) nützliche Erweiterungen gegenüber Standard-CommonMark.
- Inline-HTML ist in Markdown erlaubt – Sie können direkte HTML-Tags für Sonderfälle einfügen, die Markdown nicht unterstützt.
- Beim Kopieren des HTML-Outputs für E-Mail-Templates sollten Sie darauf achten, dass externe CSS-Klassen (z. B. für Syntax-Highlighting) auch im Zielsystem verfügbar sind.
Häufige Fragen
Was ist der Unterschied zwischen CommonMark und GitHub-Flavored Markdown?
CommonMark ist eine strenge, eindeutige Spezifikation von Standard-Markdown. GitHub-Flavored Markdown (GFM) erweitert CommonMark um Tabellen, durchgestrichenen Text (~~text~~), Aufgabenlisten und automatische URL-Verlinkung. Das Tool unterstützt GFM-Erweiterungen.
Kann ich Markdown-Tabellen in HTML konvertieren?
Ja, GFM-Tabellen (| Spalte | Spalte |) werden korrekt in HTML-Tabellen (<table>, <tr>, <th>, <td>) konvertiert. Standard-CommonMark ohne GFM-Erweiterung unterstützt keine Tabellen.
Wie kann ich den konvertierten HTML-Code in mein CMS einfügen?
Kopieren Sie den HTML-Output aus der Code-Ansicht und fügen Sie ihn in den HTML-Editor Ihres CMS ein. Achten Sie darauf, dass Ihr CMS den HTML-Code nicht erneut escaped oder verändert.
Markdown → HTML
Konvertiere Markdown zu HTML – live, mit gerenderter Vorschau und PDF-Druckfunktion.
Tool öffnen