TK TaskKit
Developer-Tools

Markdown-Vorschau

Markdown tippen, HTML sehen. CommonMark plus Tabellen und Durchstreichen, mit escaped Roh-HTML und bereinigten Links.

Markdown
Vorschau
Markdown links eingeben, gerenderte Vorschau erscheint hier.

Eingaben bleiben auf diesem Gerät. Alle Developer-Tools auf TaskKit laufen vollständig im Browser. Tokens, Payloads und eingefügte Texte werden weder an TaskKit noch an Dritte übertragen.

Was dieses Tool macht

Ein Markdown-Editor mit Live-HTML-Vorschau. Tippe CommonMark links, sieh das gerenderte Ergebnis rechts. Der Renderer unterstützt die Standard-Block- und Inline-Elemente plus GitHub-flavored Tabellen und Strikethrough. Das Output-HTML ist sanitized — Roh-HTML im Source wird escaped, und javascript:/data:-URLs werden vor dem Erreichen der Seite gedroppt.

Wann du es brauchst

  • Eine README entwerfen, bevor du sie nach GitHub pusht.
  • Eine Issue- oder PR-Beschreibung previewen, ohne den Browser zu verlassen.
  • Markdown von irgendwoher pasten und prüfen, dass es so rendert wie erwartet.
  • Sauberes HTML produzieren, das du in ein CMS kopieren kannst, das kein Markdown spricht.

Wie es funktioniert

Der Renderer ist hand-geschrieben, ~340 Zeilen, ohne Dritt-Markdown- oder Sanitizer-Dependency. Block-Parsing handhabt ATX-Überschriften, Absätze, fenced und indented Code, Listen (geordnet und ungeordnet), Blockquotes, horizontale Linien und GFM-Pipe-Tabellen. Inline-Parsing deckt Emphasis, Strong, Code-Spans, Strikethrough, Links, Bilder, Autolinks und Hard-Linebreaks ab.

Security ist auf zwei Ebenen erzwungen. Erstens läuft jeder Text-Run durch HTML-Entity-Escaping, bevor er in den Output-Buffer gelangt — ein literales <script> im Source wird zu &lt;script&gt;, nie zu einem ausführenden Tag. Zweitens läuft jede URL in einem Link oder Bild durch eine Allow-List (http(s), mailto, tel, Anker, relativer Pfad) — alles andere wird gedroppt. Das fängt javascript:, data:, vbscript:, gemischte Schreibweisen (JaVaScRiPt:) und Control-Char-Splicing (java\tscript:).

Hinweise

Warum kein Syntax-Highlighting in Code-Blöcken? Ein echter Highlighter (Prism, highlight.js, Shiki) sind 50–500 KB pro Page. Wir haben es weggelassen, um das Bundle klein zu halten. Der Sprach-Tag wird zu einem Klassennamen (language-js), du kannst Highlighting also auf das kopierte HTML draufsetzen, wenn du es brauchst.

Werden Bilder gerendert? Ja, aber nur mit sanitisierten URLs. Lokale Datei-Pfade (./image.png) sind erlaubt; data:-Image-URIs nicht.

Wie nah ist es an CommonMark? Nah auf den gängigen 90 %. Edge Cases — Link-Reference-Definitions, Setext-Überschriften, geschachtelte Listen mit Leerzeilen — können von der vollen Spec abweichen.

Verwandte Tools