tigtools

Markdown-Vorschau

Geben Sie links Markdown ein oder fügen Sie es ein und sehen Sie direkt daneben die gerenderte Vorschau. Sie läuft in einer Sandbox, sodass Skripte im Text niemals ausgeführt werden.

Läuft in Ihrem Browser Keine Anmeldung erforderlich

Anzeigen

Anleitung

  1. Geben Sie Markdown im Editor ein oder klicken Sie auf „Beispiel ausprobieren“, um ein Dokument mit Tabellen und einer Aufgabenliste zu laden.
  2. Beobachten Sie, wie die Vorschau während der Eingabe aktualisiert wird. Wechseln Sie zu „HTML-Quelltext“, um das erzeugte Markup zu sehen.
  3. Aktivieren oder deaktivieren Sie GitHub Flavored Markdown und einzelne Zeilenumbrüche, passend zum späteren Veröffentlichungsort des Textes.
  4. Kopieren Sie das HTML in ein CMS oder eine E-Mail oder laden Sie das Ergebnis als .html- oder .md-Datei herunter.

So funktioniert es

Markdown wird mit marked konvertiert, einem weit verbreiteten Open-Source-Parser, der der CommonMark-Spezifikation und bei aktivierter GFM-Option auch GitHub Flavored Markdown folgt: Tabellen mit Spaltenausrichtung, Aufgabenlisten, ~~durchgestrichener Text~~ und automatische Links für unverknüpfte URLs. Fußnoten, mathematische Formeln und Mermaid-Diagramme sind nicht Teil dieser Spezifikationen und werden als einfacher Text angezeigt.

Markdown kann rohes HTML enthalten, das wie bei den meisten Markdown-Renderern unverändert übernommen wird. Zu Ihrer Sicherheit wird die Vorschau niemals in diese Seite eingefügt. Sie wird in einem Sandbox-Frame gerendert, in dem keine Skripte ausgeführt, Formulare gesendet, Pop-ups geöffnet oder Zugriffe auf diese Website vorgenommen werden können. Außerdem blockiert die Content Security Policy Skripte, externe Stylesheets, Schriftarten und Frames. Ein <script>-Tag oder ein onclick-Attribut in Ihrem Markdown wird im HTML-Quelltext angezeigt, aber niemals ausgeführt. Links in der Vorschau werden angezeigt, lassen sich jedoch nicht öffnen. Kopieren Sie die URL, wenn Sie einem Link folgen möchten.

Die Vorschau verwendet ein neutrales Stylesheet, das gängigen README-Renderern ähnelt. Ihre Website oder GitHub kann dasselbe HTML anders darstellen. Das kopierte HTML ist ein einfaches Fragment ohne Styles; die heruntergeladene .html-Datei enthält ein grundlegendes Stylesheet, damit sie wie die Vorschau aussieht. Heruntergeladenes oder kopiertes HTML wird nicht bereinigt. Enthält es Skripte, werden diese überall ausgeführt, wo Sie den HTML-Code einfügen oder öffnen.

Beispiele

README vor dem Push prüfen

Fügen Sie eine README.md ein, um zu prüfen, ob die Tabellenspalten ausgerichtet sind, die Aufgabenliste als Kontrollkästchen dargestellt wird und die Codeblöcke korrekt eingefasst sind, bevor Sie die Datei auf GitHub hochladen.

Für ein CMS mit HTML-Unterstützung schreiben

Verfassen Sie einen Blogbeitrag in Markdown, klicken Sie dann auf „HTML kopieren“ und fügen Sie das Markup mit <h2>, <p> und <ul> in den HTML-Editor Ihres CMS ein.

Zeilenumbrüche wie im Chat

Text aus einer Chat-App enthält Zeilen, die durch einzelne Zeilenumbrüche getrennt sind. Wenn Sie „Einzelne Zeilenumbrüche als <br> behandeln“ aktivieren, bleiben die Zeilen getrennt, statt zu einem Absatz zusammengeführt zu werden.

Häufig gestellte Fragen

Ist es sicher, Markdown aus einer unbekannten Quelle einzufügen?

Ja, für die Vorschau. Das gerenderte HTML wird in einem Sandbox-Frame mit deaktivierten Skripten angezeigt. Daher bewirken selbst ein <script>-Tag oder ein Ereignis-Handler im Text hier nichts. Seien Sie vorsichtig, wo Sie das exportierte HTML einfügen, da es nicht bereinigt wird.

Warum werden meine Bilder nicht angezeigt?

Bilder von anderen Websites sind standardmäßig blockiert, damit die Vorschau keine Netzwerkanfragen stellt. Aktivieren Sie „Bilder von anderen Websites laden“, um sie anzuzeigen. Relative Pfade wie ./docs/screenshot.png funktionieren nicht, da sich die Dateien nicht hier befinden.

Werden Fußnoten, Formeln oder Diagramme unterstützt?

Nein. Unterstützt werden CommonMark und GitHub Flavored Markdown (Tabellen, Aufgabenlisten, durchgestrichener Text, automatische Links). Fußnoten, LaTeX-Formeln und Mermaid-Diagramme sind Erweiterungen, die diese Vorschau als einfachen Text darstellt.

Warum beginnt ein einzelner Zeilenumbruch keine neue Zeile?

In Standard-Markdown wird ein einzelner Zeilenumbruch innerhalb eines Absatzes als Leerzeichen behandelt. Beenden Sie die Zeile mit zwei Leerzeichen, fügen Sie eine Leerzeile ein oder aktivieren Sie „Einzelne Zeilenumbrüche als <br> behandeln“.

Datenschutz

Markdown wird in Ihrem Browser konvertiert und weder hochgeladen noch gespeichert. Die Vorschau lädt nichts aus dem Internet, es sei denn, Sie erlauben Bilder von anderen Websites. In diesem Fall werden die Bilder direkt von deren Servern abgerufen.