MyDevTools
DE

Markdown-Vorschau

Markdown mit Live-HTML-Vorschau nebeneinander schreiben: GFM-Tabellen, Aufgabenlisten, Durchstreichen. Bereinigtes HTML kopieren oder als .html-Datei laden.

Eingaben und Dateien bleiben im Browser

Schreiben oder fügen Sie hier Markdown ein oder laden Sie ein Beispiel.

Vorschau

Die gerenderte Vorschau erscheint hier, während Sie tippen.

Auf dieser Seite

Schreiben Sie Markdown auf der einen Seite und sehen Sie das gerenderte Ergebnis beim Tippen auf der anderen – praktisch für Entwürfe von READMEs, Issue-Kommentaren, Dokumentation und Release Notes, die Sie anschließend als HTML exportieren.

Detaillierte Funktionalität

Gerendert wird mit der Bibliothek marked und GitHub Flavored Markdown: Tabellen, Aufgabenlisten - [x], Durchstreichen ~~text~~, umzäunte Codeblöcke und automatische Links für nackte URLs. Ein einzelner Zeilenumbruch wird zu <br>, wie in GitHub-Kommentaren, sodass Zeilen nicht zu einem Absatz verschmelzen. Codeblöcke erscheinen in Festbreitenschrift ohne Syntaxfärbung.

Rohes HTML im Markdown wird bereinigt: Skripte, iframes, Formulare, Styles und Ereignisattribute wie onclick werden entfernt und javascript:-Links blockiert, harmlose Tags wie <kbd>, <details> oder <sub> bleiben erhalten. Links öffnen sich in einem neuen Tab. In der Vorschau werden Überschriften eine Ebene tiefer angezeigt, damit sie nicht mit dem Seitentitel konkurrieren; HTML kopieren und HTML herunterladen behalten die ursprünglichen <h1>–<h6>.

Die Werkzeugleiste fügt an der Cursorposition Syntax für Fett, Kursiv, Überschrift, Link, Bild, Inline-Code und Liste ein, und Scrollen synchronisieren hält beide Bereiche auf derselben relativen Position. Alles läuft im Browser, und das Tool speichert Ihren Text nicht – kopieren Sie ihn, bevor Sie die Seite schließen.

Praktische Beispiele

Aufgabenliste: - [x] tests und - [ ] docs werden als angehaktes und nicht angehaktes Kontrollkästchen dargestellt.

Zeilenumbrüche: Die zwei Zeilen line one und line two ~~old~~ werden zu <p>line one<br>line two <del>old</del></p>.

Tabelle: Die Zeilen | A | B |, |---|---|, | 1 | 2 | werden zu einer HTML-Tabelle mit Kopfzeile.

Unsicheres HTML: <script>alert(1)</script><b onclick=x>hi</b> wird nur als <b>hi</b> exportiert.

So verwenden Sie dieses Tool

  1. Markdown schreiben

    Tippen Sie im Markdown-Editor. Beim ersten Öffnen erscheint ein Beispieldokument; klicken Sie auf Löschen, um mit einer leeren Seite zu beginnen.

  2. Mit der Werkzeugleiste formatieren

    Markieren Sie Text und fügen Sie mit den Formatierungsschaltflächen (Fett, Kursiv, Überschrift, Link, Bild, Code, Liste) die Syntax ein.

  3. Vorschau prüfen

    Der Bereich Vorschau aktualisiert sich bei jedem Tastendruck; aktivieren Sie Scrollen synchronisieren, um beide Bereiche gemeinsam zu scrollen.

  4. Exportieren

    Nutzen Sie HTML kopieren oder Markdown kopieren oder HTML herunterladen, um markdown-preview.html mit einfachen Styles zu speichern.

Tipps und Best Practices

  • Relative Bildpfade wie img/logo.png lassen sich hier nicht auflösen; verwenden Sie vollständige https://-URLs, um Bilder zu sehen.
  • Bilder von anderen Websites lädt Ihr Browser direkt von deren Servern.
  • Reine GitHub-Extras – @mentions, Emoji-Kürzel wie :smile:, Mermaid-Diagramme und Formeln – erscheinen als normaler Text.
  • Inline-HTML wie <kbd>Ctrl</kbd> oder <details> funktioniert, die Attribute style und class werden jedoch entfernt.
  • Die heruntergeladene Datei ist eine eigenständige Seite mit hellen Styles, bereit zum Drucken oder Anhängen.