Zum Hauptinhalt springen
Markup

Markdown-zu-HTML-Ansicht

Importiert oder verarbeitet Markdown mit Marked im GFM-Modus, bereinigt das HTML durch DOMPurify, zeigt eine Vorschau und kopiert nur erlaubtes Markup lokal. Praktisch für Entwickler und Content-Autoren, die Markdown in sicheres HTML für Blogs, Dokumentationen oder E-Mails konvertieren und potenziell schädliche Inhalte filtern möchten.

Markdown-Werkzeuge

Kurz erklärt

Marked parst GFM; eine zentrale DOMPurify-Policy entfernt Scripts, Formulare, Bilder, Styles, SVG, Einbettungen und unsichere URLs vor Vorschau und Kopie.

Unterstützte Funktionen

  • Liest eingegebenen/eingefügten Text sowie .md/.markdown-Dateien und parst mit Marked in GFM bei normalem Soft-Line-Verhalten.
  • Behält erlaubte Überschriften, Absätze, Betonung, Listen, Zitate, Code, Tabellen und sichere Links nach DOMPurify-Bereinigung.
  • Entfernt Script, Style, iframe, Formularelemente, Bilder, SVG/MathML, Embeds, Metadaten, Inline-Style, srcset und nicht erlaubte URI-Schemes.
  • Bietet Live-/manuelles Rendern, setzt Links auf neuen Tab mit noopener/noreferrer und kopiert den bereinigten HTML-String.

Markdown-zu-HTML-Ansicht verwenden

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

  1. 1

    Schritt 1

    Exakte Quelle angeben

    Markdown eingeben/einfügen, eine .md/.markdown-Datei importieren oder das Beispiel laden.

  2. 2

    Schritt 2

    Vorgang wählen

    Live für sofortige Umwandlung aktiv lassen oder beim Bearbeiten ausschalten und später Rendern drücken.

  3. 3

    Schritt 3

    Verfügbare Optionen einstellen

    Marked die GFM-Syntax parsen und DOMPurify die restriktive Projekt-Policy anwenden lassen.

  4. 4

    Schritt 4

    Lokalen Vorgang ausführen

    Vorschau und Zeichenzahl prüfen, besonders Links, Tabellen, Code-Fences und entferntes Roh-HTML.

  5. 5

    Schritt 5

    Ergebnis prüfen und weiterarbeiten

    Bereinigtes HTML kopieren und in Sanitizer sowie Stylesheet des Zielsystems erneut testen.

Häufige Fehler

Eingebettete Bilder oder Formulare in der Vorschau erwarten

Folge: Die Sicherheitsregel verbietet img, form, input, button, iframe, SVG/MathML, style und weitere aktive/netzwerkfähige Elemente.

Lösung: Freigegebene Assets getrennt hosten und nur unter einer eigenen geprüften CSP des Zielsystems ergänzen.

Das Aussehen der Vorschau für Bestandteil des kopierten HTML halten

Folge: Typografie stammt aus dem Prose-CSS der Anwendung; kopiert wird Markup ohne diese Styles.

Lösung: Kopiertes HTML unter dem Ziel-Stylesheet prüfen.

Die Bereinigung hier als dauerhaften Schutz überall ansehen

Folge: Ein Ziel kann HTML unter einer anderen Policy umformen, kombinieren oder erneut parsen.

Lösung: Am endgültigen Trust Boundary nochmals bereinigen und diese Ausgabe nur als geprüftes Zwischenartefakt verwenden.

Bewährte Verfahren

  • Roh-Markdown als editierbare Quelle behalten und HTML stets neu generieren.
  • Jeden externen Link prüfen; rel-Schutz bescheinigt nicht die Vertrauenswürdigkeit des Ziels.
  • Überschriften, Listen, Tabellen und Code im endgültigen Renderer testen, weil Dialekt/CSS abweichen.

Verbundene Abläufe

Browser-Einschränkungen

  • Marked-GFM ist kein bytegenauer CommonMark-Konformitätsorakel; Erweiterungen und Roh-HTML können anderswo anders wirken.
  • Bilder und aktive/netzwerkfähige Elemente werden absichtlich entfernt; Syntaxhighlighting, Datei-Export und benutzerdefinierte Policy fehlen.
  • Parsing und DOM-Bereinigung laufen synchron im Hauptthread; sehr große Dokumente können die Oberfläche pausieren.

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
# Versionshinweise\n\n**Bereit** zur Prüfung.
Ergebnis
Überschrift und Absatz erscheinen; derselbe bereinigte HTML-String kann kopiert werden.

Marked erzeugt die beiden Elemente, DOMPurify behält diese erlaubten Tags ohne gefährliche Attribute/URIs.

Häufig gestellte Fragen

Warum verschwindet ein Bild aus meinem Markdown?

Die zentrale Policy verbietet img vollständig, um unbeabsichtigte Netzwerkanfragen und unsichere eingebettete Inhalte zu verhindern.

Sind rohe HTML-Tags im Markdown erlaubt?

Marked kann sie parsen; DOMPurify entfernt danach verbotene Tags/Attribute und behält nur das konfigurierte sichere HTML-Profil.

Was geschieht mit Markdown-Links?

Erlaubte http/https/mailto-, relative, Root- und Fragmentziele bleiben; jeder Link erhält target=_blank und rel=noopener noreferrer.

Kann ich das Vorschau-CSS mitkopieren?

Nein. Kopiert wird ausschließlich der bereinigte HTML-String, nicht Prose- oder Theme-CSS der Anwendung.

Eignet sich dies direkt für fremdes Markdown in Produktion?

Es demonstriert die geprüfte Browser-Policy; Produktion braucht weiterhin Bereinigung am finalen Trust Boundary, CSP, Updates und Regressionstests.

Datenschutz und Offline-Verhalten

Markdown und bereinigtes HTML verbleiben im Browser. Dateien werden erst nach Auswahl als Text gelesen; nach Caching funktioniert alles offline und nur Kopieren übergibt Daten bewusst.