Zum Hauptinhalt springen
Markdown

Markdown Live-Vorschau

Markdown neben einer live bereinigten Vorschau schreiben/importieren, Rendering pausieren und exakt erlaubtes HTML kopieren, ohne Scripts auszuführen oder Bilder zu laden. Ideal für Markdown-Autoren, Dokumentationsentwickler und Blogger, die格式ierung in Echtzeit prüfen und sicheres HTML für Webseiten oder CMS-Systeme exportieren möchten.

Markdown-Werkzeuge

Kurz erklärt

Marked plus DOMPurify erzeugen eine lokale Vorschau; Roh-Scripts, Formulare, Styles, Bilder, SVG, Embeds und unsichere Links erreichen den Artikel nicht.

Unterstützte Funktionen

  • CodeMirror-Markdown-Editor mit Beispiel und lokalem Textimport neben einer gerenderten Artikelvorschau.
  • Marked läuft mit GFM und breaks:false: Tabellen/Task-Listen werden erkannt, normale einzelne Zeilenumbrüche bleiben Soft Breaks.
  • DOMPurify entfernt aktive Tags, Bilder, Inline-Style/srcset, Data-Attribute und nicht erlaubte URI-Schemes.
  • Live-Vorschau kann pausieren, „Vorschau rendern“ aktiviert sie wieder; Quellzeilen werden gezählt und bereinigtes HTML kopiert.

Markdown Live-Vorschau verwenden

Dieser implementierungsspezifische Ablauf für Markdown Live-Vorschau entspricht den tatsächlichen Bedienelementen und Grenzen des Browser-Arbeitsbereichs.

  1. 1

    Schritt 1

    Exakte Quelle angeben

    Markdown links schreiben, Textdatei importieren oder das Beispiel laden.

  2. 2

    Schritt 2

    Vorgang wählen

    Live für direktes Feedback aktiv lassen oder bei großen Änderungen ausschalten.

  3. 3

    Schritt 3

    Verfügbare Optionen einstellen

    Nach pausiertem Live-Modus „Vorschau rendern“ drücken, damit die aktuelle Quelle wieder bereinigt gerendert wird.

  4. 4

    Schritt 4

    Lokalen Vorgang ausführen

    Überschriftenfolge, Listen, Zitate, Code, Tabellen und Links mit dem Ziel vergleichen und entfernte Rohinhalte beachten.

  5. 5

    Schritt 5

    Ergebnis prüfen und weiterarbeiten

    HTML erst nach Prüfung kopieren und unter den Markdown-/CSS-/Sicherheitsregeln des Ziels validieren.

Häufige Fehler

Einen einzelnen Zeilenumbruch als harten Umbruch erwarten

Folge: breaks:false behandelt ihn als Soft Break, sofern keine entsprechende Markdown-Syntax verwendet wird.

Lösung: Leerzeile für Absatz oder eine explizite CommonMark-Hard-Break-Form einsetzen.

Ein Bild einbetten und sein Verschwinden als Browserfehler ansehen

Folge: Die Policy verbietet img und andere aktive/netzwerkfähige Tags absichtlich.

Lösung: Vorschau textorientiert halten und Assets später unter Ziel-CSP ergänzen.

HTML kopieren, während Live pausiert ist

Folge: Bei ausgeschaltetem Live ist htmlOutput leer, bis „Vorschau rendern“ das Rendering wieder aktiviert.

Lösung: Aktuelle Vorschau erzeugen, kontrollieren und erst dann kopieren.

Bewährte Verfahren

  • Logische Überschriftenhierarchie verwenden und vor Veröffentlichung visuell prüfen.
  • Codeblöcke für Folgesysteme mit Sprachlabel versehen; diese Vorschau hebt Syntax selbst nicht hervor.
  • Markdown in Versionsverwaltung behalten und HTML als erneut bereinigbares Generat behandeln.

Verbundene Abläufe

Browser-Einschränkungen

  • Keine Kollaborationsspeicherung, Autosave-Datei, eigener Renderer, Syntaxhighlighting, PDF-Export oder Netzwerkgrafiken.
  • Marked-GFM kann sich an Erweiterungs-/Roh-HTML-Rändern von GitHub, CMS oder strengem CommonMark unterscheiden.
  • Lange Dokumente werden bei Live-Neuberechnung synchron geparst/bereinigt und können auf schwachen Geräten Eingaben verzögern.

Verbindliche Quellen

CommonMark Specification 0.31.2Herausgeber: CommonMark · Geprüft: 2026-07-26Marked documentation and security guidanceHerausgeber: Marked project · Geprüft: 2026-07-26DOMPurify security documentationHerausgeber: Cure53 · Geprüft: 2026-07-26

Konkrete Beispiele

Eingabe
## Status\n\n- [x] geparst\n- [ ] veröffentlicht
Ergebnis
Eine H2 und zwei Aufgaben erscheinen; kopiert wird das bereinigte HTML der installierten Marked-Version.

GFM erkennt Task-Listen. DOMPurify behält die nicht interaktiven generierten Checkboxen und entfernt verbotene aktive Inhalte.

Häufig gestellte Fragen

Führt die Vorschau HTML oder JavaScript aus dem Markdown aus?

Nein. Roh-HTML wird bereinigt; script, style, form, iframe, SVG, embed und weitere gefährliche Tags sind verboten.

Warum funktioniert eine Tabelle hier, aber nicht in einem anderen Renderer?

Hier ist GitHub Flavored Markdown aktiv; ein strikter CommonMark-Renderer ohne Tabellenerweiterung kann sie anders anzeigen.

Was liefert die Kopierfunktion genau?

Den aktuell gerenderten bereinigten HTML-String – weder ursprüngliches Markdown noch visuelles App-CSS.

Kann ich entfernte Remote-Bilder anzeigen lassen?

Nein. img ist verboten, damit die Vorschau keine Bildanfragen, Referrer- oder Netzwerkdaten erzeugt.

Wie verhindere ich Neurendern beim Bearbeiten großer Texte?

Live ausschalten und nach Abschluss einmal „Vorschau rendern“ drücken.

Datenschutz und Offline-Verhalten

Entwurf und HTML bleiben im Browser und werden nicht an einen Anwendungsserver gesendet. Datei- und Clipboard-Zugriff erfolgen nur durch Ihre Aktionen; nach Caching arbeitet alles offline.