Markdown zu HTML Konverter & Vorschau

Markdown zu HTML Konverter & Vorschau

Konvertieren Sie Markdown in Echtzeit in sauberen, produktionsreifen HTML-Code. Mit GFM-Tabellen, Syntax-Highlighting, XSS-Bereinigung, Rich-Text-Kopieren und vollständigem Dokumentenexport.

Voreinstellungen:
Markdown-Dialekt:
Exportformat:
Markdown-Quellcode-Editor
Zeilen: 31Wörter: 125Zeichen: 885Bytes: 885
Latenz: 3ms

Turbopack Build Optimizer

Build Status License: MIT

A next-generation zero-config build toolkit for modern web applications.

Feature Matrix

| Capability | Classic Webpack | Turbopack Native |
| :— | :—: | :—: |
| Cold Start (10k modules) | 8.4s | 1.2s |
| HMR Update Latency | 320ms | 18ms |
| Memory Footprint | 640 MB | 180 MB |

Roadmap & Progress

  • Rust-powered AST parsing engine
  • WebAssembly parallel sourcemap bundler
  • Edge runtime hot-reload socket connection
  • Automated polyfill treeshaking
# Install Turbopack globally
npm install -g @toolsaa/turbopack-cli

# Run dev benchmark
turbopack dev –port 3000
Ausgabegröße: 3424 bytesKompiliert: 100%
XSS neutralisiert
Latenz3 ms
Sicherheit & XSSStrikte DOM-Bereinigung (Kein XSS)
Exportformatstandalone
Clientseitige Verarbeitung

Hochperformante Echtzeit-Konvertierung, vollständig im lokalen Browser-Arbeitsspeicher ausgeführt.

Zero-Server-Upload Privatsphäre

Alle Daten bleiben strikt lokal – absolut keine externe Serverkommunikation oder Datenerfassung.

Produktionsreifer Export

Saubere, optimierte HTML-Ausgabeformate, bereit für den sofortigen Produktionseinsatz.

Technische Referenz & Architektur-Leitfaden

Markdown in HTML Konverter & Vorschau — Referenzhandbuch

Konvertieren Sie Markdown in Echtzeit in sauberen, produktionsreifen HTML-Code. Unterstützt GFM-Tabellen, Syntax-Highlighting, XSS-Bereinigung, Rich-Text-Export und vollständige HTML5-Dokumente.

Markdown in HTML Konverter & Vorschau — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss
Markdown in HTML Konverter & Vorschau — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss

Wichtige Parameter & Einstellungen

Markdown-Quelltext (rawMarkdownSource)String (RFC 7763 text/markdown)

Der rohe UTF-8-Eingabestrom gemäß CommonMark- oder GitHub Flavored Markdown (GFM)-Grammatik. Die Lexer-Tokenisierung verarbeitet Zeichen in deterministischer linearer O(n)-Zeit mit begrenztem Lookahead und isoliert Frontmatter-Blöcke, Blockelemente sowie Inline-Spans innerhalb eines isolierten Web-Worker-Kontexts.

Standard: Auto
Markdown-Dialekt (markdownDialectMode)Enum [gfm | commonmark | minimal]

Steuert die Lexer-Spezifikation und AST-Konstruktion: ‚gfm‘ aktiviert GitHub Flavored Markdown-Erweiterungen (Pipe-Tabellen, Durchstreichen, Autolinks, Aufgabenlisten); ‚commonmark‘ erzwingt strikte Konformität mit CommonMark 0.31.2; ‚minimal‘ parst standardmäßige Zitate und Überschriften ohne komplexe verschachtelte Erweiterungen.

Standard: gfm
HTML-Exportmodus (htmlExportMode)Enum [fragment | standalone | email-inline]

Konfiguriert den Serialisierungsumfang kompilierter DOM-Knoten: ‚fragment‘ gibt semantische innere HTML-Elemente aus (<article>); ‚standalone‘ erzeugt ein valides W3C-HTML5-Dokument inklusive <!DOCTYPE html>, Metadaten und Viewport-Tags; ‚email-inline‘ wandelt CSS-Kaskadenregeln in Inline-Style-Attribute für E-Mail-Clients gemäß RFC 5322 um.

Standard: fragment
XSS-Bereinigungsrichtlinie (xssSanitizationPolicy)Enum [strict-sanitized | trusted-raw]

Erzwingt eine rekursive AST/DOM-Knotenbereinigung mittels DOMPurify und Browser-DOMParser-Sandbox. Setzt sichere URI-Schemata (http:, https:, mailto:) auf die Whitelist und entfernt Skript-Vektoren, Iframes, Object-Embeds sowie Inline-DOM-Event-Attribute (onload, onerror, onclick), um Stored XSS und CSP-Verletzungen zu unterbinden.

Standard: strict-sanitized
Überschriften-Anker-Richtlinie (headingAnchorPolicy)Enum [kebab-slug | numeric-id | none]

Steuert die deterministische Generierung von id-Attributen für <h1>–<h6>-Überschriften: ‚kebab-slug‘ konvertiert Überschriften in alphanumerische Kleinbuchstaben mit Bindestrichen gemäß RFC 3986 für Deeplinks; ‚numeric-id‘ vergibt fortlaufende numerische Bezeichner; ‚none‘ deaktiviert Anker.

Standard: kebab-slug
Sicherheitsrichtlinie für externe Links (externalLinkPolicy)Boolean

Fügt rel="noopener noreferrer" und target="_blank" zu allen externen Link-Knoten (<a>) hinzu, deren Hostname von window.location.hostname abweicht, um Reverse-Tabnabbing-Angriffe über window.opener auszuschließen.

Standard: true
Frontmatter-Extraktion (frontmatterExtraction)Boolean

Isoliert und entfernt vorangestellte Dokument-Metadaten in YAML- (---) oder TOML-Blöcken (+++) vor dem Kompilieren. Serialisiert strukturierte Schlüssel-Wert-Paare in Metadaten-Objekte und verhindert, dass Metadaten-Trennzeichen in den HTML-Body geraten.

Standard: true
Typografische Zeichensetzung (smartTypography)Boolean

Führt deterministische lineare Regex-Ersetzungen durch: wandelt gerade ASCII-Anführungszeichen in typografische Anführungszeichen (&bdquo;/&ldquo;, &sbquo;/&lsquo;), doppelte/dreifache Bindestriche in Halbgeviert-/Geviertstriche (&ndash;/&mdash;) und aufeinanderfolgende Punkte in Auslassungspunkte (&hellip;) um, ohne Codeblöcke zu verändern.

Standard: true

Profi-Tipps & Best Practices

GFM-Tabellen erfordern zwingend eine Trennzeile unter dem Tabellenkopf

Gemäß GitHub Flavored Markdown (GFM §4.10) und CommonMark-Tabellenerweiterungen wird eine ASCII-Tabelle nur dann in ein semantisches <table>-Element übersetzt, wenn direkt unter der Kopfzeile eine Trennzeile steht. Diese muss pro Spalte mindestens drei Bindestriche enthalten (z. B. '| :--- | :---: | ---: |'). Doppelpunkte steuern die Ausrichtung: linksbündig (:---), zentriert (:---:) und rechtsbündig (---:). Das Fehlen der Trennzeile, fehlende vorangehende Leerzeilen oder unmaskierte Pipe-Zeichen (\|) im Zellentext führen zum Abbruch des Tabellen-Parsings und zum Fallback auf Fließtext.

Abwehr von Stored-XSS-Angriffen durch unbereinigte Links und Grafiken

Markdown-Spezifikationen erlauben standardmäßig die direkte Durchreichung von nativem HTML und beliebigen URI-Schemata, was erhebliche Cross-Site-Scripting-Risiken (XSS) birgt. Typische Angriffsvektoren sind manipulierte Linkziele wie [Payload](javascript:alert(document.domain)) oder <img>-Tags mit Base64-Daten und bösartigen SVG-Payloads. Webanwendungen dürfen rohe Compiler-Ausgaben niemals ungefiltert in innerHTML injizieren. Bereinigen Sie den generierten DOM-Baum stets mit DOMPurify oder der HTML Sanitizer API unter Verwendung einer strikten Protokoll-Whitelist (http:, https:, mailto:) und CSP-Level-3-Direktiven.

Harte Zeilenumbrüche erzwingen: Zwei Leerzeichen vs. Backslash-Syntax

Gemäß CommonMark §6.7 wird ein einfacher Zeilenumbruch innerhalb eines Absatzes als weicher Umbruch gewertet und im HTML zu einem einfachen ASCII-Leerzeichen (0x20) zusammengefasst. Um einen echten HTML-Zeilenumbruch (<br />) zu erzwingen, muss die Zeile entweder mit mindestens zwei Leerzeichen oder einem Backslash (\) vor dem Enter abgeschlossen werden. In automatisierten Pipelines wandelt die Compiler-Option breaks: true weiche Zeilenumbrüche automatisch in <br /> um – essenziell für Chat-Verläufe, Logs und E-Mail-Templates.

CSS-Scoping-Konflikte beim Einbinden von HTML in Web-Frameworks

Wird ungescopetes HTML in moderne Komponenten-Frameworks (React, Next.js, Vue) eingebettet, kommt es häufig zu Spezifitätskonflikten: Globale CSS-Resets überschreiben Markdown-Elemente oder Markdown-Stile verfälschen das Host-Layout. Kapseln Sie kompiliertes HTML stets in einem isolierten Container (z. B. <article class="markdown-body">) mit CSS Custom Properties oder nutzen Sie den Modus 'Vollständiges Dokument', der ein in sich geschlossenes Reset-Stylesheet gemäß CSS Containment Module Level 2 bereitstellt.

Häufige Fehlerquellen & Fehlerbehebung

⚠️Markdown-Tabellen werden als unformatierter Text mit Pipes statt als HTML-<table> dargestellt

Prüfen Sie, ob Ihre Tabelle direkt nach der Kopfzeile eine gültige Trennzeile mit mindestens drei Bindestrichen pro Spalte enthält (z. B. '| --- | --- |'). Stellen Sie außerdem sicher, dass vor der Tabelle eine Leerzeile steht; CommonMark- und GFM-Parser benötigen eine leere Zeile, um vorangehende Absätze abzuschließen und den Tabellen-Zustandsautomaten zu initialisieren.

⚠️HTML-Tags wie <div> oder <span> werden als &lt;div&gt;-Entities maskiert

Dies geschieht, wenn die XSS-Bereinigung auf striktes Escaping eingestellt ist oder der Compiler mit html: false betrieben wird. Um valides HTML innerhalb von Markdown darzustellen, stellen Sie sicher, dass die Bereinigungsrichtlinie sichere HTML-Tags erlaubt, während aktive Skripte gefiltert werden. Achten Sie zudem darauf, dass HTML-Tags nicht mit 4 Leerzeichen oder einem Tab eingerückt sind, da dies als Codeblock interpretiert wird.

⚠️Codeblöcke werden ohne Syntax-Highlighting als unformatierter Text gerendert

Markdown-Parser erzeugen standardmäßig lediglich strukturelle HTML-Wrapper (z. B. <pre><code class="language-typescript">...</code></pre>) und enthalten keine CSS-Farbschemata. Binden Sie im Host-Dokument ein Stylesheet wie Prism.js oder Highlight.js ein oder wählen Sie in diesem Tool den Exportmodus 'Vollständiges Dokument', der vordefinierte Syntax-Highlighting-Stile direkt integriert.

⚠️Eingerückter Text in Listenpunkten wird unerwünscht in einen Codeblock umgewandelt

Nach CommonMark §4.4 interpretiert der Lexer eine Einrückung von 4 Leerzeichen oder einem Tabulator relativ zum Listenelement als eingerückten Codeblock. Um mehrzeilige Absätze innerhalb desselben <li>-Elements zu formatieren, rücken Sie die Folgezeilen um genau 2 Leerzeichen (passend zur Listenmarkierung) ein und unterschreiten Sie die 4-Leerzeichen-Schwelle.

Häufig gestellte Fragen (FAQ)

Wie konvertiert man Markdown in JavaScript zu HTML?▼

Markdown wird in JavaScript in einen abstrakten Syntaxbaum (AST) zerlegt und über Parser-Bibliotheken wie marked oder markdown-it in HTML kompiliert. In modernem ES6+: import { marked } from 'marked'; const rawHtml = marked.parse(markdownText, { gfm: true, breaks: true });. Bereinigen Sie den generierten HTML-String vor dem Einfügen in DOM-Knoten via innerHTML stets mit DOMPurify.sanitize(rawHtml), um Stored-Cross-Site-Scripting (XSS) zuverlässig zu verhindern.

CommonMark vs. GitHub Flavored Markdown (GFM): Wo liegt der Unterschied?▼

CommonMark ist die standardisierte, eindeutige Kernspezifikation für Markdown, die geschaffen wurde, um Parser-Inkonsistenzen zu beseitigen. GitHub Flavored Markdown (GFM) ist eine formale Obermenge von CommonMark 0.29, die praxisnahe Entwickler-Erweiterungen ergänzt: Pipe-Tabellen (| spalte |), Checkboxen für Aufgabenlisten (- [ ] / - [x]), automatische Linkerkennung (Autolinks), Durchstreichen (~~text~~) und umzäunte Codeblöcke mit Sprachbezeichner.

Wie erstellt man Tabellen in Markdown für valide HTML-<table>-Tags?▼

Erstellen Sie eine Kopfzeile mit Pipe-Trennzeichen (|), gefolgt von einer obligatorischen Trennzeile mit mindestens drei Bindestrichen pro Spalte, z. B.: '| Parameter | Typ |' gefolgt von '| :--- | ---: |' und den Datenzeilen '| Timeout | 5000ms |'. Doppelpunkte steuern die Ausrichtung: ':---' für linksbündig, ':---:' für zentriert und '---:' für rechtsbündig. Der Parser wandelt diese Syntax in semantische <table>-, <thead>-, <tbody>-, <tr>-, <th>- und <td>-Tags um.

Wie verhindert man XSS-Angriffe beim Rendern von Markdown zu HTML?▼

Der Schutz vor Cross-Site-Scripting (XSS) erfordert eine mehrstufige Bereinigungs-Pipeline (Defense-in-Depth). Konfigurieren Sie den Markdown-Compiler so, dass beliebiges Inline-HTML deaktiviert oder auf unbedenkliche Tags beschränkt wird. Leiten Sie das generierte HTML anschließend durch einen geprüften Sanitizer wie DOMPurify oder die W3C Sanitizer API, welche <script>-Tags, eingebettete Objekte, Event-Handler (onload, onerror) und unsichere Pseudo-Protokolle (javascript:, data:) rekursiv eliminieren.

Wie wandelt man Markdown in ein vollständiges HTML5-Dokument mit CSS um?▼

Hüllen Sie das kompilierte HTML-Fragment in ein vollständiges HTML5-Gerüst ein, bestehend aus <!DOCTYPE html>, <html lang="de">, einem <head>-Bereich mit UTF-8-Encoding, Viewport-Meta-Tags und typografischen Stylesheets. Wählen Sie in diesem Tool die Exportoption 'Vollständiges Dokument', um eine eigenständige HTML-Datei mit GitHub-inspiriertem, responsivem Design und Dark-/Light-Mode-CSS herunterzuladen.

Warum werden Zeilenumbrüche aus Markdown in HTML nicht angezeigt?▼

Gemäß CommonMark-Spezifikation §6.7 gelten einfache Zeilenumbrüche in Absätzen als weiche Umbrüche (Soft Breaks) und werden beim Kompilieren zu einem einfachen Leerzeichen zusammengefasst. Dadurch bleibt der Quelltext flexibel umbrechbar. Um einen harten Umbruch (<br />) zu erzeugen, fügen Sie am Zeilenende zwei Leerzeichen ein, beenden die Zeile mit einem Backslash (\) vor dem Zeilensprung oder aktivieren im Parser die Option breaks: true.

Verwandte Tools & Hilfsprogramme

Alle Tools →
Cron-Parser & Crontab-TesterEntwicklung

Cron-Ausdrücke in lesbare Zeitpläne übersetzen. Prüfen Sie Ausführungszeitpunkte über Zeitzonen hinweg, validieren Sie Crontab-Syntax und berechnen Sie künftige Termine.

Tool öffnen→
GraphQL zu TypeScript & CodegenEntwicklung

Konvertieren Sie GraphQL-SDL-Schemas und Queries in TypeScript-Typen, Interfaces, Enums und Resolver. Direkte browserbasierte Codegenerierung ohne Server-Upload.

Tool öffnen→
HTML zu Markdown Konverter (GFM)Entwicklung

HTML zuverlässig in GitHub Flavored Markdown (GFM) mit Tabellen und Code-Blöcken konvertieren. Inline-Styles bereinigen und saubere MD-Dateien exportieren.

Tool öffnen→
Diff Checker & Text-VergleichstoolEntwicklung

Vergleichen Sie Text, Code und Dateien mit unserem schnellen Diff-Checker. Prüfen Sie Side-by-Side- oder Inline-Änderungen auf Zeichenebene, ignorieren Sie Leerzeichen und exportieren Sie Unified Diffs.

Tool öffnen→
Canonical-Tag-Generator & URL-BuilderEntwicklung

Erstellen Sie gültige rel=canonical-Tags und HTTP-Header mit unserem Canonical-Tag-Generator. Entfernen Sie Tracking-Parameter, normalisieren Sie URLs und beheben Sie Duplicate-Content-Probleme im SEO.

Tool öffnen→
cURL zu Fetch Konverter (JS & Node)Entwicklung

cURL-Befehle sofort in moderne Fetch-API-Syntax umwandeln. HTTP-Header, Auth-Tokens, Cookies und JSON-Payloads in asynchronen JavaScript-Code parsen.

Tool öffnen→