Markdown-Vorschau

Schreibe Markdown und sieh sofort eine Live-HTML-Vorschau. GitHub-kompatible (GFM) Tabellen, Aufgabenlisten, Code-Blöcke, Links und Bilder werden unterstützt — keine Installation, keine Anmeldung, läuft vollständig in deinem Browser.

🔗 Scroll synchronisieren

Markdown

Live-HTML-Vorschau

✓ YAML-Front-Matter erkannt

Inhaltsverzeichnis (automatisch)

💾 Dein Entwurf wird automatisch in diesem Browser gespeichert — schließe den Tab und kehre später zurück, um genau dort weiterzumachen, wo du aufgehört hast.

Kurzantwort Bei der Markdown-Vorschau siehst du reine Textmarkierungen wie „# Überschrift”, „**fett**” und „- Liste” in dem Moment als formatiertes HTML dargestellt, in dem du sie eintippst. Tippe dein Markdown in dieses Tool (oder lade eine .md-Datei hoch), sieh die Vorschau rechts und kopiere dann das HTML oder lade es als .md/.html herunter — es wird nie etwas an einen Server gesendet.

15+Unterstützte Markdown-Elemente

0Externe Bibliotheken

SofortVerzögerung der Live-Vorschau

100%Clientseitige Verarbeitung

⚙️ Genauigkeits- & Umfangshinweis: Dieses Tool unterstützt die gängigsten Markdown- und GitHub Flavored Markdown (GFM)-Elemente: Überschriften, Fett/Kursiv, durchgestrichenen Text, Listen, Aufgabenlisten, Inline-Code/Code-Blöcke (mit Syntax-Hervorhebung für JS, Python, Bash und HTML), Blockzitate, Links, Bilder, horizontale Linien, Tabellen, Fußnoten ([^1]) und YAML-Front-Matter (----Block am Dateianfang, wird als kompakte Metadaten-Karte über der Vorschau angezeigt). Erweiterte Syntax wie LaTeX-Mathematik und eingebettete Diagramme (Mermaid) liegen außerhalb des Funktionsumfangs. Es wird nie Text an einen Server gesendet — die gesamte Umwandlung und Vorschau erfolgt in deinem Browser mit JavaScript.

📝 Markdown-Vorschau — ToolPico ↗

Was ist Markdown, und wie verwendet man es?

Eine vollständige Erklärung der Markdown-Syntax — von Überschriften über Tabellen bis zu Aufgabenlisten und Code-Blöcken — sowie der Unterschied zu GitHub Flavored Markdown (GFM).

Markdown ist eine von John Gruber im Jahr 2004 entwickelte, schlanke Auszeichnungssprache, mit der du reinen Text mit einfachen Zeichen formatieren kannst. Das Ziel ist ein Text, der sowohl als reiner Text lesbar als auch automatisch in sauberes HTML umwandelbar ist. Heute wird es überall eingesetzt — von GitHub-README-Dateien über Blogbeiträge bis hin zu technischer Dokumentation und Notizen. Dieses Tool wandelt das von dir eingegebene Markdown sofort, ganz ohne Einrichtung, in HTML um und zeigt die Vorschau an.

Was sind die grundlegenden Markdown-Elemente?

KurzantwortDie Kernelemente von Markdown sind: # Überschrift (Ebenen 1–6), **fett** und *kursiv* gesetzter Text, - Listenelemente, `Inline-Code` und ```Code-Block```, > Blockzitat, [Text](url) Link, ![Alt](url) Bild, sowie --- horizontale Linie. Alle diese Elemente werden von diesem Tool unterstützt und können mit einem Klick über die Symbolleiste eingefügt werden.

Überschriften — die Anzahl der # am Zeilenanfang bestimmt die Überschriftenebene (# = H1, ## = H2 …).
Betonung — einfaches Sternchen/Unterstrich für Kursiv, doppeltes Sternchen/Unterstrich für Fett, doppelte Tilde (~~) für Durchgestrichen.
Listen — „-”, „*” oder „+” für eine ungeordnete Liste; „1.” für eine nummerierte Liste; „- [ ]”/„- [x]” für eine Aufgabenliste.
Code — ein einzelnes Backtick für Inline-Code, dreifache Backticks (```) für einen mehrzeiligen Code-Block.

Wie erstellt man eine Tabelle in Markdown (GFM)?

KurzantwortEine GFM-Tabelle besteht aus drei Teilen: einer Kopfzeile (| Name | Alter |), einer Trennzeile (| --- | --- |) und Datenzeilen. Die Position des Doppelpunkts in der Trennzeile steuert die Ausrichtung: :--- links, :---: zentriert, ---: rechts. Sieh dir ein Live-Beispiel in der Tabelle unten an.

Beispiel: Markdown-Quelltext → Vorschauergebnis
Was du schreibst	Was du siehst
`# Überschrift`	Große H1-Überschrift
`wichtig`	wichtig (fett)
`- [x] erledigt`	☑ markierte Aufgabenbox
`\| A \| B \| \| --- \| --- \| \| 1 \| 2 \|`	Formatierte 2-spaltige Tabelle

Was ist der Unterschied zwischen Markdown und HTML?

KurzantwortHTML ist eine tag-basierte Auszeichnungssprache, die Browser direkt interpretieren, und relativ mühsam zu schreiben und zu lesen. Markdown ist eine textnahe Kurzschrift-Sprache, die schnell geschrieben ist, und ein Konverter wie dieser wandelt sie automatisch in gültiges HTML um. Du kannst dir Markdown als die „Quelle” und HTML als die „generierte Ausgabe” vorstellen.

Markdown-Syntax-Referenztabelle

Eine zitierfähige Schnellreferenz: Grundsyntax und GitHub-Flavored-Markdown (GFM)-Erweiterungen.

Grundlegende Markdown-Syntax
Syntax	Beschreibung
`# Überschrift` … `###### Überschrift`	Überschriftenebenen 1–6
`fett` oder `__fett__`	Fetter Text
`kursiv` oder `_kursiv_`	Kursiver Text
`code`	Inline-Code
`> Zitat`	Blockzitat
`- Element` / `1. Element`	Ungeordnete / nummerierte Liste
`[Text](url)`	Link
`![Alt](url)`	Bild
`---`	Horizontale Linie

Quelle: CommonMark-Spezifikation (basierend auf der ursprünglichen Markdown-Syntax).

GitHub-Flavored-Markdown (GFM)-Erweiterungen
Syntax	Beschreibung
`~~durchgestrichen~~`	Durchgestrichener Text
`- [ ] Aufgabe`	Unerledigtes Aufgabenlistenelement
`- [x] Aufgabe`	Erledigtes Aufgabenlistenelement (anklickbar)
`\| A \| B \|` `\| --- \| --- \|`	Tabelle (Ausrichtung links/zentriert/rechts: `:---`/`:---:`/`---:`)
```lang … ```	Sprachmarkierter Code-Block (Syntax-Hervorhebung für JS, Python, Bash, HTML)
`text[^1]` … `[^1]: Anmerkung`	Fußnote — automatisch nummerierte Quellen-/Erklärungsanmerkung
www.site.com / https://…	Automatische Linkerkennung (in diesem Tool die explizite Syntax [Text](url) verwenden)

Quelle: GitHub-Flavored-Markdown-Spezifikation. Verwendet in GitHub-README-Dateien, Issues und Pull-Request-Beschreibungen.

Glossar der Markdown-Begriffe

Kurze Definitionen der wichtigsten in Markdown und GFM verwendeten Begriffe.

Markdown (MD)Eine schlanke Auszeichnungssprache, die reinen Text mit einfachen Zeichen formatiert und in HTML umwandelt.

GFMGitHub Flavored Markdown — GitHubs Variante, die Tabellen, Aufgabenlisten und durchgestrichenen Text hinzufügt.

Eingezäunter Code-BlockEin mehrzeiliger Codebereich, der mit dreifachen Backticks (```) geöffnet und geschlossen wird und in dem keine Formatierung angewendet wird.

Inline-CodeEin kurzer Code-Ausschnitt, der mit einem einzelnen Backtick umschlossen ist und im Fließtext eines Absatzes steht.

AufgabenlisteEine Liste in der Form „- [ ]” / „- [x]”, die auf GitHub als anklickbare Checkbox dargestellt wird.

Front MatterEin YAML-Metadatenblock am Anfang einer Markdown-Datei, begrenzt durch --- am Zeilenanfang; dieses Tool erkennt ihn automatisch und zeigt seinen Inhalt als kompakte Metadaten-Karte über der Vorschau an.

Escape-Zeichen (\)Wird vor ein Markdown-Zeichen gesetzt, um es als reinen Text statt formatiert anzuzeigen (z. B. \*).

Überschriften-Anker (Slug)Eine kurze, automatisch aus jeder Überschrift generierte ID, mit der direkt auf diesen Abschnitt verlinkt werden kann.

CommonMarkDie von der Community vereinbarte formale Spezifikation, die die Mehrdeutigkeiten von Markdown auflöst.

Schutz vor HTML-InjektionRoheingaben werden maskiert, bevor die Formatierung angewendet wird, damit schädlicher Code nicht ausgeführt werden kann.

Ausführliche Anleitungen

Detaillierte Antworten auf die häufigsten Fragen zu Markdown.

Wie erstellt man eine Tabelle in Markdown (Schritt für Schritt)

Eine GFM-Tabelle besteht aus drei Zeilenblöcken: einer Kopfzeile, einer Trennzeile und Datenzeilen. Jede Zelle wird durch einen senkrechten Strich (|) getrennt. Beispiel: Unter einer Zeile wie | Produkt | Preis | fügst du | --- | --- | hinzu, danach Datenzeilen wie | Artikel | 10 |. Die Anzahl der Spalten muss in jeder Zeile übereinstimmen.

Für die Ausrichtung setzt du einen Doppelpunkt vor/nach dem Bindestrich in der Trennzeile: :--- richtet links aus, ---: rechts, :---: zentriert. Die Schaltfläche „⬚ Tabelle” in der Symbolleiste dieser Seite fügt ein fertiges Tabellengerüst ein — du musst nur die Zellen ausfüllen.

Wie schreibt man eine GitHub-README.md

Eine gute README enthält typischerweise diese Abschnitte: den Projektnamen und eine kurze Beschreibung (H1-Überschrift), Installationsschritte (nummerierte Liste), ein Verwendungsbeispiel (Code-Block), Funktionen (Aufzählungsliste) und Lizenzinformationen. Wenn du # für Überschriften und dreifache Backticks (```) für Code-Beispiele verwendest, erhältst du auf GitHub automatische Syntax-Hervorhebung.

Klicke oben auf die Vorlage „README”, um ein fertiges Gerüst in dieser Struktur zu laden, passe es für dein Projekt an, prüfe die HTML-Vorschau und lade es am Ende als .md herunter.

Markdown oder Word? Wann nutzt man was?

Markdown eignet sich ideal für technische Dokumentation, README-Dateien, Blogbeiträge, Wiki-Seiten und versionskontrollierten (Git-)Text — weil es reiner Text, diff-fähig und werkzeugunabhängig ist. Word/Google Docs ist die bessere Wahl, wenn du ein komplexes Seitenlayout, einheitliche Formatierung (Schriftarten, Ränder) oder formelle Dokumente benötigst.

Bevor du Markdown teilst, sieh es dir mit diesem Tool in der Vorschau an, um sicherzugehen, dass die Formatierung wie erwartet aussieht, und exportiere es bei Bedarf direkt als HTML, um es in eine Webseite oder ein CMS einzufügen.

Diese Vorschau auf deiner Website einbinden (Embed-Code)

Binde die Markdown-Vorschau kostenlos auf deiner eigenen Website ein. Kopiere den folgenden Code in dein HTML — das Tool läuft in einer vereinfachten Ansicht und verlinkt als Quelle auf diese Seite zurück.

Embed-Code (iframe)

Das eingebettete Tool hat ein festes Layout; du kannst den Wert von height an deine Website anpassen. Keine Werbung, keine persönlichen Daten, läuft vollständig clientseitig.

Häufig gestellte Fragen

Wie schreibt man Markdown?

Mit Markdown kannst du reinen Text mit einfachen Zeichen formatieren: eine # am Zeilenanfang für eine Überschrift, **Text** für Fett, *Text* für Kursiv, ein - am Zeilenanfang für ein Listenelement und [Text](url) für einen Link. Ein spezieller Editor ist nicht nötig — du kannst ihn in jeder Textdatei schreiben und mit der Endung .md speichern. Tippst du in den Editor auf dieser Seite, siehst du das Ergebnis sofort im rechten Bereich.

Wie zeigt man eine MD-Datei in der Vorschau an?

Füge ihren Inhalt in den Editor auf dieser Seite ein oder nutze die Schaltfläche „Datei hochladen”, um sie direkt von deinem Computer auszuwählen. Die Datei wird automatisch gelesen und als formatiertes HTML im rechten Bereich angezeigt; kein Upload oder Serververarbeitung nötig, alles läuft in deinem Browser.

Wie erstellt man eine Tabelle in Markdown?

In der GFM-Tabellensyntax wird die Kopfzeile durch | getrennt, gefolgt von einer Trennzeile wie | --- | --- |, dann den Datenzeilen. Ein Doppelpunkt (:) in der Trennzeile steuert die Zellenausrichtung. Die Schaltfläche „⬚ Tabelle” in der Symbolleiste fügt ein fertiges Gerüst ein.

Was ist GitHub Flavored Markdown (GFM)-Syntax?

GitHub Flavored Markdown (GFM) ist GitHubs Variante von Markdown, die Tabellen, Aufgabenlisten (- [ ]), durchgestrichenen Text (~~Text~~) und erweiterte Inline-/Code-Block-Unterstützung zum Standard-Markdown hinzufügt. README-Dateien, Issues und Pull Requests werden alle in GFM geschrieben.

Wie konvertiert man Markdown zu HTML?

Tippe dein Markdown in den Editor auf dieser Seite; du kannst den Quelltext der sofort rechts erscheinenden HTML-Vorschau mit „HTML kopieren” kopieren oder ihn mit „.html herunterladen” als vollständige .html-Datei speichern. Die Umwandlung erfolgt vollständig in deinem Browser, ohne dass Daten an einen Server gesendet werden.

Was ist der beste Online-Markdown-Editor?

Ein guter Online-Markdown-Editor sollte sofortige Vorschau, Unterstützung für GFM-Tabellen/Aufgabenlisten, HTML/MD-Export und Datenschutz bieten. Dieses Tool erfüllt alle vier: Nichts, was du eingibst, wird an einen Server gesendet, alles läuft in deinem Browser, und es ist kein Konto oder Anmeldung erforderlich.

Wie schreibt man eine Aufgabenliste (Checkbox) in Markdown?

Schreibe „- [ ] Zu erledigende Aufgabe” am Zeilenanfang; für eine erledigte Aufgabe nutze „- [x] Erledigt”. Auf dieser Seite kannst du das Kästchen in der Vorschau anklicken, um seinen Status umzuschalten, und den aktualisierten Markdown-Quelltext im Editor sehen.

Wie lädt man eine Markdown-Datei herunter oder exportiert sie?

Du kannst den Inhalt des Editors als ursprüngliches Markdown (.md) oder als formatiertes HTML (.html) herunterladen; die entsprechenden Schaltflächen befinden sich unter dem Tool-Bereich. Du kannst auch „Link kopieren” nutzen, um deinen Inhalt über eine URL mit anderen zu teilen.

Wie schreibt man eine Fußnote in Markdown?

Platziere einen Verweis wie [^1] im Text und definiere ihn irgendwo auf der Seite als [^1]: Erklärung. Die Kennung kann statt einer Zahl auch ein Wort sein (z. B. [^quelle]). Dieses Tool nummeriert Fußnoten automatisch in der Reihenfolge ihres Auftretens, sammelt sie in einem Abschnitt „Fußnoten” unter der Vorschau und verlinkt jeden Verweis mit seiner Anmerkung und wieder zurück. Ideal, um Quellen in wissenschaftlichen Texten und Blogbeiträgen zu zitieren.

Unterstützt der Code-Block Syntax-Hervorhebung?

Ja. Fügst du einem eingezäunten Code-Block eine Sprachkennung hinzu (```js, ```python, ```bash, ```html), werden Schlüsselwörter, Zeichenketten, Zahlen, Kommentare und Funktionsnamen farbig hervorgehoben. Die Hervorhebung erfolgt vollständig in deinem Browser ohne externe Bibliothek und passt sich dem Dunkelmodus an.

Wie speichert man Markdown als PDF?

Klicke auf die Schaltfläche „🖨️ Drucken / PDF” unter dem Tool-Bereich; der Druckdialog deines Browsers öffnet sich, und wenn du „Als PDF speichern” als Ziel wählst, wird die formatierte Vorschau als PDF-Datei heruntergeladen. Editor- und Oberflächenelemente werden in der Ausgabe ausgeblendet — nur das gerenderte Dokument erscheint.

Methodik & Quellen

ToolPicos Markdown-Vorschau ist ein kostenloses, unabhängiges Tool. Die Parsing-Engine arbeitet ohne externe Bibliothek in zwei Durchgängen: zeilenbasierte Blockerkennung (Überschriften, Listen, Blockzitate, Code-Blöcke, Tabellen), gefolgt von Inline-Formatierung (Fett, Kursiv, Code, Links, Bilder).

Quellen: CommonMark-Spezifikation · GitHub-Flavored-Markdown (GFM)-Spezifikation. Zuletzt aktualisiert: 22. Juli 2026. Die Ergebnisse decken die gängigsten Markdown-/GFM-Elemente ab; erweiterte Syntax wie LaTeX-Mathematik und eingebettete Diagramme liegt außerhalb des Funktionsumfangs.