Markdown-Entwurf

Live-Vorschau

Was ist Markdown-Vorschau?

Die Markdown-Vorschau ist ein Echtzeit-Rendering-Tool, das Ihnen genau zeigt, wie Ihr Markdown-Quellcode aussehen wird, wenn er in HTML konvertiert wird. Ueber eine geteilte Ansicht schreiben Sie rohes Markdown auf der linken Seite, waehrend die rechte Seite die gerenderte Ausgabe sofort anzeigt. Dieses unmittelbare visuelle Feedback eliminiert das Raetselraten bei der Markdown-Formatierung — Sie koennen sehen, wie Ueberschriften erscheinen, ob Links funktionieren, wie Codeblocks gerendert werden und ob die Tabellensyntax korrekt ist.

CommonMark ist die Standard-Markdown-Spezifikation, der die meisten Vorschau-Tools folgen und die eine konsistente Darstellung plattformuebergreifend sicherstellt. Dieses Tool implementiert CommonMark-kompatibles Parsing. Fuer GitHub-spezifische Funktionen wie Aufgabenlisten, Durchstreichungen und Autolinks wird auch GitHub Flavored Markdown unterstuetzt.

Vorschau-Tools sind fuer jeden Content-Ersteller, der mit Markdown arbeitet, unverzichtbar. Technische Redakteure koennen komplexe verschachtelte Listen und Codeblock-Formatierung validieren. Open-Source-Maintainer koennen sicherstellen, dass Feature-Tabellen korrekt gerendert werden. Entwickler koennen Commit-Nachrichten, Pull-Request-Beschreibungen und Issue-Kommentare vor dem Absenden richtig formatieren.

So verwenden Sie die Markdown-Vorschau

Folgen Sie diesen Schritten, um Markdown als HTML in Echtzeit anzuzeigen. Jeder Schritt verwendet die tatsaechlichen Schaltflaechen und Panels auf dieser Seite.

1

Einfuegen, Hochladen oder Beispiel laden

Geben Sie Markdown in das linke Panel Markdown-Entwurf ein, oder klicken Sie auf Hochladen, um eine .md-Datei zu laden. Klicken Sie auf Beispiel fuer eine Beispiel-API-Dokumentation. Unterstuetzt CommonMark und GFM (Tabellen, Aufgabenlisten, Codeblocks).

2

Live-Vorschau ansehen

Das rechte Panel Live-Vorschau aktualisiert sich waehrend Sie tippen. Sehen Sie Ueberschriften, Listen, Tabellen und Codeblocks gerendert. Keine Verzoegerung — sofortiges Feedback.

3

HTML kopieren oder herunterladen

Klicken Sie auf HTML kopieren oder HTML herunterladen, um die Ausgabe zu verwenden. Verwenden Sie Leeren, um neu zu beginnen. Die gesamte Verarbeitung erfolgt in Ihrem Browser.

Wann Sie dies tatsaechlich verwenden wuerden

Dokumentation schreiben und bearbeiten

GitHub-Repositories, ReadTheDocs-Projekte und Dokumentationsseiten mit MkDocs oder Hugo verwenden alle Markdown. Vorschau-Tools lassen Sie Dokumentation entwerfen und perfektionieren, ohne auf Builds oder Deployments warten zu muessen.

Blog-Posts und Artikel entwerfen

Blog-Plattformen wie Jekyll, Hugo, 11ty und Ghost akzeptieren Markdown fuer Inhalte. Entwerfen und formatieren Sie Ihren Blog-Post im Vorschau-Tool, pruefen Sie Typografie und Hervorhebung, und kopieren Sie ihn dann in Ihre Blog-Plattform.

GitHub Issues und PRs verfassen

Beim Schreiben detaillierter GitHub Issues oder Pull-Request-Beschreibungen koennen Sie mit Vorschau-Tools Ihre Nachricht perfekt formatieren. Verwenden Sie die Vorschau, um zu pruefen, dass Tabellen korrekt gerendert werden und Codeblocks die richtige Syntaxhervorhebung haben.

Release Notes und Changelogs erstellen

Software-Releases erfordern klare, gut formatierte Release Notes. Verwenden Sie die Markdown-Vorschau, um Changelogs mit korrekter Formatierung, Versions-Headern, Feature-Listen und Warnungen vor Breaking Changes zu entwerfen.

Haeufig gestellte Fragen (FAQ)

Zeigt die Vorschau genau, wie mein Inhalt ueberall gerendert wird?

Die Vorschau verwendet CommonMark-kompatibles Parsing plus GitHub Flavored Markdown-Erweiterungen und stellt genau dar, wie Ihr Inhalt auf den meisten modernen Plattformen erscheinen wird. Einige Plattformen haben jedoch benutzerdefinierte CSS-Stile oder zusaetzliche Erweiterungen. Pruefen Sie die Dokumentation Ihrer Zielplattform, wenn Sie eine exakte visuelle Uebereinstimmung benoetigen.

Welche Markdown-Erweiterungen werden unterstuetzt?

Diese Vorschau unterstuetzt CommonMark-Kernsyntax plus GitHub Flavored Markdown-Erweiterungen: Tabellen, Aufgabenlisten (- [ ] Elemente), Durchstreichungen (~~Text~~), Autolinks und Mention-Syntax. Nicht jeder Markdown-Dialekt wird unterstuetzt, aber die am haeufigsten verwendeten Funktionen sind abgedeckt.

Kann ich das generierte HTML kopieren?

Ja. Klicken Sie auf "HTML kopieren", um die gerenderte HTML-Ausgabe in Ihre Zwischenablage zu kopieren. Sie koennen es dann in jeden HTML-Editor, E-Mail-Client oder jedes Webformular einfuegen, das HTML akzeptiert. Das HTML ist sauber und semantisch korrekt.

Werden Sonderzeichen in der Ausgabe korrekt escaped?

Ja. Der Parser escaped automatisch HTML-Sonderzeichen (&, <, >, ", ') im Textinhalt und verhindert so Injection-Angriffe und Rendering-Fehler. Wenn Ihr Markdown diese Zeichen in normalem Text enthaelt, erscheinen sie korrekt in der gerenderten Ausgabe.

Wie behandelt das Tool Zeilenumbrueche?

Das Tool folgt den CommonMark-Regeln: Ein einzelner Zeilenumbruch in Ihrer Quelle wird zu einem Leerzeichen in der Ausgabe. Um einen tatsaechlichen Zeilenumbruch (<br>) zu erzeugen, verwenden Sie zwei Leerzeichen am Zeilenende gefolgt von einem Zeilenumbruch oder einen Backslash vor dem Zeilenumbruch. Fuer Absatzumbrueche verwenden Sie eine Leerzeile. Die CommonMark-Spezifikation hat detaillierte Beispiele.

Kann ich rohes HTML in meinem Markdown einbinden?

Ja. Markdown erlaubt rohe HTML-Bloecke und Inline-HTML. Wenn Sie HTML direkt in Ihr Markdown schreiben, wird es unveraendert in die Ausgabe aufgenommen. Dies ist nuetzlich fuer Funktionen, die Markdown nativ nicht unterstuetzt. Verwenden Sie HTML jedoch sparsam.

Verwandte Tools