Markdown-Vorschau

Tippen Sie auf der einen Seite Markdown und sehen Sie es live auf der anderen gerendert – Überschriften, Fett, Kursiv, Listen, Codeblöcke und Links, alles sofort in Ihrem Browser vorgeschaut.

Hat Ihnen dieser Rechner geholfen?

Was ist Markdown-Vorschau?

Markdown ist die schlanke Formatierungssyntax hinter READMEs, Blogbeiträgen, Chatnachrichten, Dokumentation und unzähligen anderen Orten, an denen Sie einfache, lesbare Formatierung wollen, ohne rohes HTML zu schreiben. Weil Markdown reiner Text ist, lässt es sich überall leicht schreiben – aber es ist auch leicht, die Syntax leicht falsch zu machen und es erst zu bemerken, wenn man bereits veröffentlicht hat. Diese Vorschau rendert Ihr Markdown während der Eingabe, Seite an Seite mit der Quelle, sodass Sie Formatierungsfehler sofort erkennen können – ein fehlendes Leerzeichen nach einer #, ein nicht geschlossener Code-Fence oder eine Liste, die sich nicht vom darüberliegenden Absatz getrennt hat – bevor Sie eine README committen, einen Beitrag veröffentlichen oder eine formatierte Nachricht senden.

Wann Sie diesen Rechner verwenden

Writing a GitHub or GitLab README and want to verify formatting before committing
Drafting a Markdown post for a blog platform, documentation site, or wiki
Checking a Markdown email or chat message renders correctly before sending
Learning Markdown syntax by experimenting with different formatting and seeing instant results
Converting a short Markdown snippet to HTML for pasting into a CMS or email template
Debugging a Markdown document where some formatting isn't rendering as expected

Schritte:

Tippen oder fügen Sie Ihr Markdown in das linke Feld ein.
Beobachten Sie, wie die gerenderte HTML-Vorschau rechts sofort aktualisiert wird.
Passen Sie Ihre Syntax an, bis die Vorschau Ihrer Absicht entspricht.
Kopieren Sie Ihre fertige Markdown-Quelle, sobald Sie mit dem Ergebnis zufrieden sind.

Formel

# Überschrift →

Überschrift

**fett** → fett *kursiv* → kursiv `code` → code [Text](url) → Text - Element →

Element

Anwendungsfälle

Vorschau einer GitHub- oder GitLab-README vor dem Commit
Entwerfen formatierter Nachrichten für Slack, Discord oder andere Markdown-fähige Chat-Apps
Prüfen der Formatierung von Blogbeiträgen oder Dokumentation vor der Veröffentlichung
Erlernen der Markdown-Syntax durch Experimentieren und sofortiges Sehen der Ergebnisse
Schnelles Umwandeln eines kurzen Markdown-Ausschnitts in HTML zum Einfügen anderswo

Hauptvorteile

Sehen Sie Ihr Markdown sofort gerendert, Seite an Seite mit der Quelle
Erkennen Sie Syntaxfehler, bevor Sie irgendwo veröffentlichen
Läuft vollständig offline in Ihrem Browser – nichts wird hochgeladen
Kostenlos, keine Anmeldung, keine Dateigrößenbeschränkung bei typischer Nutzung

Professionelle Tipps

Fügen Sie vor und nach Listen und Codeblöcken eine Leerzeile ein, um bei verschiedenen Markdown-Parsern die zuverlässigste Darstellung zu erzielen
Verwenden Sie doppelte Sternchen für Fett und einfache Sternchen (oder Unterstriche) für Kursiv, um Zweideutigkeiten zu vermeiden
Sehen Sie sich die Vorschau zuerst in diesem Tool an und prüfen Sie dann die Zielplattform (GitHub, Slack usw.), da manche zusätzliche Syntax wie Tabellen unterstützen
Halten Sie Überschriften sequenziell (springen Sie nicht von # zu ###) für eine bessere Dokumentstruktur und Barrierefreiheit

Häufige Fehler vermeiden

Vergessen der Leerzeile, die zwischen einem Absatz und einer folgenden Liste benötigt wird
Fehlendes Leerzeichen nach #-Symbolen in Überschriften, wodurch diese nicht gerendert werden
Nicht geschlossene Code-Fence (```) lassen, wodurch der Rest des Dokuments als Code verschluckt wird
Verwenden einzelner statt doppelter Sternchen für Fett, was stattdessen Kursivschrift erzeugt

Wichtige Begriffe erklärt

CommonMark: Eine standardisierte Spezifikation der Markdown-Syntax, entwickelt, um Inkonsistenzen zu verringern
GFM: GitHub-Flavored Markdown, ein erweiterter Dialekt mit Unterstützung für Tabellen und Aufgabenlisten
Code-Fence: Ein durch dreifache Backticks (```) abgegrenzter Block zur Formatierung mehrzeiligen Codes
Inline-Formatierung: Formatierung innerhalb einer einzelnen Zeile, wie *kursiv* oder `code`, im Gegensatz zu Block-Elementen

Beispiel

Die Eingabe „## Hallo\n\nDas ist **fett** und das ist *kursiv*.“ wird als Überschrift der Ebene 2 gefolgt von einem Absatz mit fettem und kursivem Text dargestellt.

Interpretation Ihrer Ergebnisse

Das linke Feld zeigt Ihren rohen Markdown-Quelltext, das rechte Feld rendert ihn in Echtzeit als formatiertes HTML. Jede Eingabe aktualisiert die Vorschau sofort, sodass Sie die Wirkung jedes Syntaxelements unmittelbar sehen. Häufige Darstellungsprobleme lassen sich meist auf die Abstände zurückführen. Zwischen einem Absatz und einer nachfolgenden Liste ist bei den meisten Renderern eine Leerzeile erforderlich. Überschriften benötigen ein Leerzeichen nach den #-Symbolen. Code-Fences (```) müssen auf einer eigenen Zeile stehen, damit der Codeblock gerendert wird. Die Vorschau entspricht annähernd der Darstellung Ihres Markdown auf den meisten Plattformen (GitHub, Slack, Discord usw.), aber jede Plattform hat ihren eigenen Renderer mit leichten Abweichungen. Prüfen Sie bei allem, was über die Grundformatierung hinausgeht, stets die endgültige Darstellung auf der Zielplattform.

Häufig gestellte Fragen

Welche Markdown-Syntax unterstützt dieses Tool?

Überschriften (# bis ######), Fett (**Text**), Kursiv (*Text*), Inline-Code (`code`), Codeblöcke (```), Links ([Text](url)), Aufzählungslisten (- Element), nummerierte Listen (1. Element) und Blockzitate (> Text).

Wird mein Inhalt irgendwo gespeichert oder hochgeladen?

Nein. Alles wird vollständig in Ihrem Browser mittels JavaScript geparst und gerendert. Nichts, was Sie eingeben, wird an einen Server gesendet, gespeichert oder protokolliert.

Warum wird meine Formatierung nicht korrekt angezeigt?

Markdown erfordert exakte Syntax – zum Beispiel wird eine Leerzeile zwischen einem Absatz und einer Liste benötigt, damit viele Renderer sie korrekt trennen, und Überschriften brauchen ein Leerzeichen nach den #-Symbolen. Prüfen Sie auf fehlende Leerzeichen oder Zeilenumbrüche rund um die verwendete Formatierung.

Kann ich damit eine GitHub-README vor dem Commit in der Vorschau ansehen?

Ja, für die gängigen Markdown-Elemente, die dieses Tool unterstützt. GitHubs Renderer unterstützt einige zusätzliche GitHub-Flavored-Markdown-Erweiterungen (wie Tabellen und Aufgabenlisten), die diese schlanke Vorschau nicht enthält, prüfen Sie deshalb bei allem über die Grundsyntax hinaus immer die endgültige Darstellung direkt auf GitHub.

What Markdown syntax does this tool support?

Headings (# through ######), bold (**text**), italics (*text*), inline code (`code`), code blocks (```), links ([text](url)), bulleted lists (- item), numbered lists (1. item), and blockquotes (> text).

Is my content saved or uploaded anywhere?

Nein. Alles wird vollständig in Ihrem Browser mittels JavaScript geparst und gerendert. Nichts, was Sie eingeben, wird an einen Server gesendet, gespeichert oder protokolliert.

Why isn't my formatting showing up correctly?

Can I use this to preview a GitHub README before committing?

Was ist der Unterschied zwischen Markdown und HTML?

Markdown ist eine leichtgewichtige Auszeichnungssprache, die sich als Klartext einfach schreiben und lesen lässt. HTML ist eine vollwertige Auszeichnungssprache mit komplexerer Syntax. Markdown wird zur Anzeige häufig in HTML konvertiert. Dieses Tool rendert Markdown in Echtzeit als HTML.

How do I create a table in Markdown?

Standard-Markdown unterstützt keine Tabellen, GitHub-Flavored Markdown hingegen schon. Verwenden Sie Pipe-Zeichen (|) zur Trennung der Spalten und Bindestriche als Trenner für die Kopfzeile. Diese Vorschau rendert keine Tabellen – prüfen Sie die endgültige Darstellung auf Ihrer Zielplattform.

Can I write LaTeX math in Markdown?

This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.

Markdown-Vorschau

Was ist Markdown-Vorschau?

Wann Sie diesen Rechner verwenden

Schritte:

Formel

Überschrift

Anwendungsfälle

Hauptvorteile

Professionelle Tipps

Häufige Fehler vermeiden

Wichtige Begriffe erklärt

Verwandte Konzepte

Beispiel

Interpretation Ihrer Ergebnisse

Häufig gestellte Fragen

Verwandte Tools

Seitenverhältnis-Rechner

Bandbreitenrechner

Laden Sie den Zeitrechner herunter

Cloud-Hosting-Kostenrechner

CDN-Kostenrechner

API-Monetisierungsrechner

Markdown-Vorschau

Hello World

Was ist Markdown-Vorschau?

Wann Sie diesen Rechner verwenden

Schritte:

Formel

Überschrift

Anwendungsfälle

Hauptvorteile

Professionelle Tipps

Häufige Fehler vermeiden

Wichtige Begriffe erklärt

Verwandte Konzepte

Beispiel

Interpretation Ihrer Ergebnisse

Häufig gestellte Fragen

Verwandte Tools

Seitenverhältnis-Rechner

Bandbreitenrechner

Laden Sie den Zeitrechner herunter

Cloud-Hosting-Kostenrechner

CDN-Kostenrechner

API-Monetisierungsrechner

Hello World