Markdown zu HTML Konverter — Markdown online in HTML umwandeln _

Was ist Markdown zu HTML-Konvertierung?

Markdown ist ein leichtgewichtiges Klartextformat, das mit minimaler Zeichensetzung (# für Überschriften, * für Hervorhebung, - für Listenelemente) strukturierte Prosa kodiert. GitHub Flavored Markdown (GFM) erweitert die ursprüngliche CommonMark-Spezifikation um Tabellen, Durchstreichungen, Aufgabenlisten und Autolinks. HTML ist die gerenderte Form, die der Browser anzeigt. Markdown in HTML zu konvertieren ermöglicht es, in der leichtgewichtigen Syntax zu schreiben und an eine gerenderte Oberfläche auszuliefern — ein README, eine statische Seite, ein E-Mail-Body — ohne die Tags von Hand schreiben zu müssen.

Welche GitHub Flavored Markdown-Funktionen werden unterstützt?

Der mitgelieferte Parser marked@12.0.2 unterstützt das vollständige GFM-Superset: Überschriften im ATX-Stil von # bis ######, geordnete und ungeordnete Listen mit Verschachtelung, fett **Text** und kursiv *Text*, durchgestrichen ~~Text~~, Inline-Links [Text](url) und Inline-Bilder ![alt](src), eingezäunte Codeblöcke mit optionalem Sprach-Tag (```js), Inline-Code-Spans `code`, Pipe-Tabellen mit Kopfzeile, GFM-Aufgabenlisten - [ ] / - [x], Blockzitate >, horizontale Trennlinien --- und Autolinks. Jedes Element rendert im Vorschaufenster genauso wie GitHub es rendert.

Wie funktioniert die Markdown zu HTML-Konvertierung?

Jede Konvertierung läuft lokal in deinem Browser mit zwei gebündelten Bibliotheken — kein CDN, kein fetch, keine Telemetrie. Die Hauptschritte sind:

1. Parsen: marked.parse(source) liest dein Markdown und erzeugt einen HTML-String. Der Parser läuft im GFM-Modus, sodass Tabellen, Aufgabenlisten, Durchstreichungen und Autolinks alle erkannt werden.
2. Bereinigen: Die HTML-Ausgabe wird über DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) geführt, bevor sie an innerHTML zugewiesen wird. DOMPurify ist derselbe XSS-Sanitizer, den Mozilla MDN, Atlassian und Microsoft 365 nutzen — er analysiert das HTML, läuft durch das DOM und entfernt <script>-Elemente, alle on*-Event-Handler-Attribute und javascript:-URI-Schemata.
3. Rendern: Das bereinigte HTML wird per innerHTML in das Vorschaufenster geschrieben, und das rohe HTML wird im zweiten Bereich über ein schreibgeschütztes <textarea> angezeigt, sodass du den Markup kopieren kannst. Der Live-Modus debounct Eingaben um 150 ms, damit die Vorschau beim Tippen aktualisiert wird, ohne den Parser zu überlasten.

Warum Markdown mit diesem Tool in HTML konvertieren?

• Datenschutz: Jeder Parse-, Bereinigungs- und Render-Schritt erfolgt in deinem Browser. Das Markdown — einschließlich unveröffentlichter Blogposts, interner Dokumentationsentwürfe und vertraulicher README-Inhalte — erreicht unsere Server nie.
• Standardmäßig XSS-sicher: Das Vorschaufenster führt jede HTML-Zeichenkette vor innerHTML durch DOMPurify, sodass ein <script>-Tag oder ein onerror=-Handler im rohen HTML deines Markdowns eine inerte Vorschau ergibt. Der Rohdaten-Tab zeigt die unbereinigte Ausgabe zur Inspektion, sie sitzt aber innerhalb eines <textarea> via value — nie ausgeführt.
• GFM-vollständig: Tabellen, Durchstreichungen, Aufgabenlisten und Autolinks rendern so wie GitHub sie rendert. Eine Markdown-Pipe-Tabelle wird zu einem HTML <table> mit <thead> und <tbody> — keine verlorenen Zeilen, keine abgeflachte Struktur.

Was sind typische Anwendungsfälle der Markdown zu HTML-Konvertierung?

Markdown in HTML zu konvertieren taucht in Dokumentation, Static-Site-Arbeit und E-Mail-Verfassung auf:

• GitHub README-Erstellung: Ein Projekt-README lokal als Markdown verfassen und vor dem Push in der Vorschau prüfen. Die Vorschau entspricht dem GFM-Renderer von GitHub für Tabellen, Aufgabenlisten und eingezäunten Code.
• Static-Site-Inhalt: Einen Markdown-Post einfügen und das HTML für ein CMS-Feld oder eine Template-Engine holen, die Markup statt Markdown-Quelle erwartet.
• E-Mail-Vorlagen: Den Körper einer Transaktions-E-Mail als Markdown schreiben und für die Template-Engine des E-Mail-Dienstleisters nach HTML konvertieren. Die Ausgabe ist semantisch sauberes HTML — keine Inline-Styles, keine eingebauten E-Mail-Client-Eigenheiten.

Wie sieht ein Markdown zu HTML-Beispiel aus?

Wenn du # Titel\n\n- Element 1\n- Element 2\n\n[Link](https://example.com) einfügst, enthält das Vorschaufenster <h1>Titel</h1>, eine ungeordnete Liste mit zwei Einträgen und einen <a href="https://example.com">Link</a>. Der Rohdaten-Bereich zeigt die exakte HTML-Zeichenkette, damit du sie direkt in ein Template kopieren kannst. Eine Pipe-Tabelle mit einer Ausrichtungszeile |---|---| wird zu einem vollständigen <table> mit <thead> und <tbody> — was bestätigt, dass GFM-Tabellen so gerendert werden wie GitHub sie rendert.

Läuft dieser Markdown zu HTML-Konverter komplett in meinem Browser?

Ja. Jeder Parse-, Bereinigungs- und Render-Schritt läuft lokal als JavaScript in deinem Browser-Tab. Die gebündelten Bibliotheken — marked@12.0.2 und DOMPurify@3.1.7 — werden aus derselben Origin wie die Seite ausgeliefert, daher keine CDN-Abhängigkeit, kein fetch, kein XMLHttpRequest, kein navigator.sendBeacon auf die Eingabe. Das Tool funktioniert auch offline, sobald die Seite geladen ist, denn es ist ein statisches HTML/CSS/JS-Bundle, bei dem die Vendor-Bibliotheken danebenliegen. Unveröffentlichte Posts, interne Dokumente und vertrauliche READMEs bleiben auf deinem Gerät.

Ist das gerenderte Vorschaufenster XSS-sicher?

Ja. Jede an innerHTML zugewiesene HTML-Zeichenkette durchläuft zunächst DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify ist der von Cure53 gepflegte Open-Source-XSS-Sanitizer; es ist dieselbe Bibliothek, die Mozilla MDN, Atlassian und Microsoft 365 verwenden, um vom Nutzer übergebenes HTML zu härten. Das Standard-html-Profil entfernt <script>-Elemente, jedes on*-Event-Handler-Attribut (onerror, onclick usw.), javascript:-URI-Schemata innerhalb von href / src und als gefährlich bekannte CSS-Ausdrücke. Das Einfügen von <img src=x onerror=alert(1)> erzeugt eine Vorschau, in der document.querySelector('#output-preview img[onerror]') null zurückgibt und kein Alert ausgelöst wird.

Werden GFM-Tabellen unterstützt?

Ja. Die Richtung Markdown → HTML behandelt Pipe-Tabellen nativ über den GFM-Modus von marked — eine Kopfzeile, getrennt durch eine Ausrichtungszeile |---|---|, gefolgt von Datenzeilen, erzeugt eine <table> mit <thead> + <tbody>. Durchstreichungen (~~Text~~ → <del>Text</del>) und Aufgabenlisten (- [ ] / - [x] → <input type="checkbox">) rendern so wie GitHub sie rendert.

Wird mein Markdown getreu konvertiert?

Für den kanonischen GFM-Funktionsumfang — Überschriften h1 bis h6, geordnete und ungeordnete Listen mit Verschachtelung, fett / kursiv / durchgestrichen, Inline-Links, Inline-Bilder, eingezäunte Codeblöcke mit Sprach-Tags, Inline-Code-Spans, Pipe-Tabellen, Aufgabenlisten, Blockzitate, horizontale Trennlinien und Autolinks — ist die HTML-Ausgabe stabil und entspricht dem Renderer von GitHub. Einige Verhaltensweisen zu beachten: roher Inline-HTML innerhalb von Markdown (z. B. <sub>Text</sub>) wird unverändert in die Ausgabe durchgereicht, und Setext-Überschriften aus CommonMark (Unterstreichungen mit ===) sowie ATX-Überschriften (# Titel) erzeugen beide denselben <h1>. Das sind dokumentierte Verhaltensweisen von marked, keine Bugs. Für die Gegenrichtung nutze das HTML zu Markdown-Tool.

Wird Syntaxhervorhebung in eingezäunten Codeblöcken unterstützt?

Nicht in v1. Eingezäunte Codeblöcke werden mit Monospace-Schrift und einem dezenten Hintergrund gerendert, aber ohne Token-Hervorhebung pro Sprache. Syntaxhervorhebung hinzuzufügen würde bedeuten, Prism oder highlight.js zu bündeln, die jeweils 15–40 KB plus eine Grammatikdatei pro Sprache und eine Themen-Matrix mitbringen, die mit der Workshop-Terminal-Palette abgestimmt werden müsste. Vorerst konzentriert sich der Renderer auf Korrektheit und XSS-Sicherheit; bei entsprechender Nutzernachfrage ist ein opt-in-Schalter für Inline-Hervorhebung ein machbarer Folge-Schritt.

Dieser Markdown zu HTML Konverter liefert marked@12.0.2 und DOMPurify@3.1.7 aus derselben Origin gebündelt mit, unterstützt den vollständigen GFM-Funktionsumfang und bereinigt jede gerenderte HTML-Zeichenkette, bevor sie das DOM berührt. Kein Upload, kein CDN, keine Telemetrie — jedes Byte bleibt in deinem Browser.