Markdown-Vorschau

Privat – Ihre Datei wird nie gespeichert

Inhaltsverzeichnis hinzufügen

Markdown

383 Zeichen · 20 Zeilen

Vorschau

So funktioniert’s

Schreiben oder einfügen

Oder eine .md-Datei hier ablegen. Die Vorschau aktualisiert sich beim Tippen.

So sehen, wie es aussehen wird

Tabellen, Aufgabenlisten, Durchstreichungen, Fußnoten und farbige Codeblöcke – im GitHub-Stil, nicht bloßes CommonMark.

Mitnehmen

Das HTML kopieren oder als eigenständige Webseite speichern, die sich überall öffnen und sauber drucken lässt.

Welches Markdown – und warum das HTML bereinigt wird

Markdown ist eher eine Familie als eine einzelne Spezifikation, und der Dialekt hier ist der weithin anerkannte GitHub-Flavored-Umfang: Überschriften, Hervorhebungen, Listen, Links, Bilder, Blockzitate, Tabellen, Codeblöcke mit Syntaxhervorhebung, Aufgabenlisten, Durchstreichungen, Fußnoten und automatische Links. Das ist, was fast alle schreiben und was in einer README steht. Exotischere Dialekte und die eigenen Plugins, die eine bestimmte Website ergänzt – Hinweisblöcke, Shortcodes, Templating –, werden nicht unterstützt, sodass ein Dokument, das für einen bestimmten Generator geschrieben wurde, einen Teil seiner Syntax wörtlich zeigen kann.

Rohes HTML wird dargestellt, aber vorher bereinigt – und genau diesen Teil sollte man verstehen. Markdown erlaubt ausdrücklich HTML, das heißt, eine Markdown-Datei von irgendwoher kann ein script-Tag, einen Inline-Event-Handler, einen iframe oder einen javascript:-Link enthalten. Das unverändert darzustellen, würde den Code eines Fremden in Ihrer Sitzung ausführen – nur weil Sie seine README zum Ansehen eingefügt haben. Alles Ausführbare wird entfernt, bevor irgendetwas angezeigt wird: Die Formatierung bleibt, der Code nicht.

Das ist eine allgemeine Lektion, kein Detail dieser Seite. Jedes System, das von Nutzern geliefertes Markdown darstellt – ein Kommentarfeld, ein Wiki, ein Support-Ticket –, stellt von Nutzern geliefertes HTML dar, sofern es nicht bereinigt, und „ist doch nur Markdown“ ist genau der Gedanke, bei dem das übersehen wird. Die Umwandlung des Markdowns ist keine Sicherheitsgrenze; das Bereinigen ist es.

Sie erhalten eine Vorschau des Inhalts, nicht einer bestimmten Website. GitHub, GitLab und ein Dokumentationsgenerator verwenden jeweils ihr eigenes Stylesheet, eigene Überschriftenanker und Erweiterungen, sodass dieselbe Datei überall etwas anders aussieht – die hier gezeigte Struktur ist das, worin sich alle einig sind. Es wird nichts abgerufen: Bilder, die über eine Webadresse eingebunden sind, laden nur, wenn der jeweilige Server es zulässt, und relative Pfade zu Dateien in einem Repository lassen sich gar nicht auflösen.

Wenn Sie etwas anderes brauchen

Eine README, die Sie gerade selbst schreiben, sehen Sie sich am besten dort an, wo sie später liegt. GitHubs eigener Editor zeigt die Vorschau mit exakt seiner Darstellung, seinen Erweiterungen und Ankern, und die GitHub CLI – gh markdown-preview – tut das lokal mit demselben Renderer. Für Dokumentation hat der Generator selbst (MkDocs, Docusaurus, Hugo) eine Live-Vorschau mit dem echten Styling und der echten Navigation – also mit dem, was die Leser sehen werden.

Zum Bearbeiten statt Prüfen ist ein Markdown-Editor mit Live-Vorschau – Obsidian, Typora, VS Code mit seiner eingebauten Vorschau – besser, als jedes Mal in eine Seite einzufügen, denn die Vorschau aktualisiert sich beim Tippen und die Datei bleibt, wo sie ist. Diese Seite ist dafür gedacht, das Markdown anderer zu lesen oder kurz anzusehen, was man Ihnen geschickt hat.

Häufig gestellte Fragen

Wird mein Dokument irgendwo gespeichert?

Nein. Es wird nichts gespeichert, nichts aufbewahrt, und sobald die Seite geladen ist, funktioniert es auch bei ausgeschaltetem WLAN. Notizen, Entwürfe und interne Dokumentation sind genau das, was man gedankenlos in eine Vorschau einfügt.

Welche Markdown-Variante ist das?

GitHub Flavored Markdown, denn das ist heute in der Praxis gemeint, wenn von „Markdown“ die Rede ist. Tabellen, Aufgabenlisten, Durchstreichungen, automatische Links, Fußnoten und Codeblöcke mit Syntaxfarben funktionieren alle. Reine CommonMark-Vorschauen kennen nichts davon – deshalb sieht eine README, die auf GitHub richtig aussieht, dort kaputt aus.

Kann ich rohes HTML verwenden?

Ja, und es wird vor der Anzeige bereinigt. Markdown erlaubt rohes HTML, und diese Vorschau stellt es dar – aber alles, was ein Skript ausführen könnte, wird vorher entfernt, denn das Einfügen einer fremden README sollte niemals deren Code ausführen. Formatierung, Links und Bilder bleiben erhalten.

Werden Codeblöcke hervorgehoben?

Ja, mit Spracherkennung, für die Sprachen, die man in einer README erwartet – mit demselben Highlighter, den Renderer im GitHub-Stil verwenden. Schreiben Sie die Sprache hinter die öffnenden Backticks, und der Code wird entsprechend eingefärbt.

Kann ich daraus ein PDF machen?

Unser Tool [Markdown in PDF](markdown-to-pdf) macht genau das, mit sauberen Seitenumbrüchen und guter Typografie. Diese Seite ist zum Lesen und Prüfen da; jene zum Erstellen eines Dokuments.

Was ist mit Bildern in meinem Markdown?

Bilder, die über eine Webadresse eingebunden sind, laden ganz normal. Bilder mit relativem Pfad – „![](img/chart.png)“ – können nicht gelesen werden, weil eine Webseite keinen Zugriff auf den Ordner hat, in dem Ihre Datei liegt. Sie erscheinen als Platzhalter mit dem Namen der fehlenden Datei statt als kaputtes Symbol.

Gut zu wissen: Rohes HTML in Ihrem Markdown wird dargestellt, aber vorher bereinigt – Skripte, Event-Handler und alles, was ausgeführt werden könnte, werden entfernt, sodass das Einfügen einer fremden README deren Code nicht ausführen kann. GitHub Flavored Markdown wird unterstützt; exotischere Dialekte und eigene Plugins nicht.

Dieses Tool auf Ihrer Website einbinden

Kostenlos für jeden Blog, jede Kursseite und jeden Hilfeartikel. Fügen Sie ein einziges Snippet ein, und Ihre Besucher können das Tool direkt auf Ihrer Seite nutzen.