Markdown Vorschau mit Tabellen, Aufgabenlisten und Bildern
Tabellen in Markdown bestehen aus senkrechten Strichen, Bindestrichen und Doppelpunkten. Diese Markdown Vorschau zeigt sie schon beim Tippen als fertige Tabelle. Links steht der Quelltext, rechts die gerenderte Seite. Das hilft, wenn du eine README, ein Changelog oder einen Ticketkommentar prüfen willst, bevor du ihn irgendwo einfügst. Ein Zähler über den Feldern nennt die Wörter und Zeichen deines Textes.
Aufbau einer Tabelle
Die erste Zeile ist die Kopfzeile. Darunter folgt eine Trennzeile aus Bindestrichen. In ihr legen Doppelpunkte die Ausrichtung fest: :-- links, :-: zentriert, --: rechts. Die äußeren senkrechten Striche sind optional. Soll ein Strich im Zelltext stehen, schreibe \|. In Zellen funktionieren fett, kursiv, Code und Links.
Hat eine Zeile zu wenige Zellen, füllt die Vorschau sie mit leeren Zellen auf. Zellen über die Kopfzeile hinaus fallen weg. Vor der Tabelle brauchst du keine Leerzeile; sie darf direkt unter einer Textzeile beginnen. Eine Zelle nimmt aber nur eine Zeile Fließtext auf. Eine Liste oder ein zweiter Absatz geht nicht, und ein getipptes <br> erscheint als Text. Breite Tabellen scrollen waagerecht im Vorschaufeld.
Welche Syntax die Vorschau kennt
Die Seite nutzt die Bibliothek marked im GitHub-Modus. Sie stellt Überschriften der Ebenen 1 bis 6 dar, außerdem fett, kursiv, ~~durchgestrichen~~, Inline-Code, Codeblöcke mit Zaun, Zitate, nummerierte und unnummerierte Listen, verschachtelte Listen, Aufgabenlisten, Trennlinien, Links, Bilder und Tabellen. Eine nackte Adresse wie https://example.com wird ohne Klammern zum Link. Die Kästchen der Aufgabenlisten lassen sich nicht anklicken.
Ein einzelner Zeilenumbruch im Quelltext bleibt ein Zeilenumbruch. Eine Leerzeile beginnt einen neuen Absatz. Die Sprachangabe hinter dem Zaun, etwa js, wird akzeptiert, der Code bekommt aber keine Farben.
Den Teiler zwischen den Feldern bedienen
- Tippe oder füge Markdown in das Feld "Markdown Quellcode" ein. Das Feld "Live-Vorschau" aktualisiert sich bei jedem Tastendruck.
- Ziehe den Teiler zwischen den Feldern mit Maus, Finger oder Stift. Ein Doppelklick setzt ihn auf 50/50 zurück. Per Tastatur fokussierst du den Teiler und drückst Pfeil links oder rechts (2 Prozent), Umschalt plus Pfeil (10 Prozent), Pos1, Ende oder Enter (zurücksetzen).
- Mit "Großansicht" füllt das Werkzeug den Bildschirm. Die Breite bleibt erhalten.
- "HTML kopieren" legt den bereinigten HTML-Inhalt in die Zwischenablage. "Als HTML speichern" lädt
document.htmlmit einem kleinen Stylesheet herunter, das auch Tabellen abdeckt.
Die Breite bleibt zwischen 15 und 85 Prozent. Der Browser merkt sie sich auf diesem Gerät im lokalen Speicher. Unter 860 px Breite liegen die Felder untereinander, und der Teiler verschwindet.
Rohes HTML, Links und externe Bilder
HTML, das du in den Quelltext schreibst, erscheint als Text und läuft nie. Links behalten nur diese Ziele: http, https, mailto, #anker und relative Pfade. Jeder andere Link verliert sein Ziel.
Externe Bilder lädt die Vorschau nicht, denn beim Laden fragt dein Browser den Server an, der das Bild hostet. Stattdessen steht ein Platzhalter mit dem Alternativtext da. Mit dem Schalter "Externe Bilder laden" erscheinen sie. Bilder als data:image/png;base64, (auch JPEG, GIF, WebP, AVIF) zeigt die Vorschau immer. Das kopierte und das gespeicherte HTML behalten jedes Bild-Tag samt Adresse.
Was fehlt und wohin dein Text geht
Es gibt keine Syntaxfarben, keine Fußnoten, keine Formeln, keine Emoji-Kürzel wie :smile: und kein Front Matter. Ein Block zwischen zwei ----Zeilen erscheint als Linie und Überschrift. Die beiden Felder scrollen nicht gemeinsam.
Die Bibliotheken marked und dompurify laden beim Öffnen der Seite. Schlägt das fehl, zeigt die Vorschau eine Meldung. Danach wandelt der Browser dein Markdown um und sendet nichts. Im Netzwerk-Tab kannst du das prüfen. Die Zwischenablage nutzt das Werkzeug nur bei "HTML kopieren", eine Datei entsteht nur bei "Als HTML speichern".
Häufig gestellte Fragen (FAQ)
| --- | --- |.