Startseite › Blog › README in Markdown schreiben und sofort als HTML sehen
README in Markdown schreiben und sofort als HTML sehen — ohne Editor-Installation
Wer ein GitHub-Repository, einen Blogbeitrag oder Besprechungsnotizen in Markdown schreibt, will meist nicht raten, wie das Ergebnis aussieht. Diese Anleitung zeigt, wie du Markdown-Text direkt im Browser tippst und die HTML-Vorschau in Echtzeit siehst — inklusive Tabellen, Aufgabenlisten und Export.
Warum eine Live-Vorschau beim Markdown-Schreiben hilft
Kurzantwort Eine Live-Vorschau zeigt sofort, wie dein Markdown-Text als HTML aussehen wird — Überschriften, Listen, Links und Code-Blöcke werden while du tippst gerendert, sodass Formatierungsfehler direkt sichtbar sind, statt erst nach dem Speichern auf GitHub oder im CMS aufzufallen.
Markdown ist bewusst einfach gehalten: eine Raute # für Überschriften, Sternchen für Fett und Kursiv, ein Bindestrich für Listenpunkte. Genau diese Einfachheit macht es aber auch leicht, sich zu vertippen — ein vergessenes Leerzeichen nach der Raute, eine falsch eingerückte Liste, eine Tabelle ohne korrekte Trennzeile. Die Markdown-Vorschau von ToolPico rendert den Text im rechten Bereich bei jedem Tastendruck neu, sodass solche Fehler sofort auffallen, bevor die Datei irgendwo hochgeladen wird.
Das Tool läuft vollständig im Browser: Nichts von dem, was du tippst, wird an einen Server gesendet. Für ein README, das später auf GitHub liegt, oder für einen Blogbeitrag, der in ein CMS eingefügt wird, ist das ein spürbarer Vorteil — der Entwurf bleibt privat, bis du ihn selbst veröffentlichst.
Praxisbeispiel (Annahme): Ein typisches README mit Installationsschritten, drei Code-Blöcken und einer Funktions-Tabelle lässt sich in der Geteilten Ansicht meist in wenigen Minuten fertigstellen, weil man Formatierungsfehler sofort sieht statt sie erst nach dem Hochladen auf GitHub zu bemerken. Diese Zeitangabe ist eine Orientierung, kein gemessener Durchschnittswert.
GFM-Tabellen, Aufgabenlisten und Fußnoten
Kurzantwort Für eine Tabelle im GitHub-Flavored-Markdown (GFM)-Stil trennst du Spalten mit | und fügst nach der Kopfzeile eine Trennzeile wie | --- | --- | ein; für eine Aufgabenliste schreibst du - [ ] beziehungsweise - [x] am Zeilenanfang.
GFM erweitert das klassische Markdown um Elemente, die aus README-Dateien und Pull Requests bekannt sind: Tabellen, anklickbare Aufgabenlisten, durchgestrichenen Text mit ~~Text~~ und automatische Linkerkennung. Die Markdown-Vorschau unterstützt diese Elemente vollständig, inklusive spaltenweiser Ausrichtung über den Doppelpunkt in der Trennzeile.
Beispielhafte GFM-Tabellensyntax (Muster, keine echten Messwerte)
Markdown-Eingabe
Gerenderte Ausgabe
Hinweis
**fett**
fett
Doppelte Sternchen
- [x] erledigt
anklickbare Checkbox
Klick schaltet Status um
\| A \| B \|
Tabellenzeile
Trennzeile mit --- nötig
[^1]
hochgestellte Fußnotenzahl
automatisch nummeriert
Zusätzlich unterstützt das Tool eingezäunte Code-Blöcke mit Syntax-Hervorhebung (etwa für JS, Python, Bash oder HTML), YAML-Front-Matter am Dateianfang — dargestellt als kompakte Metadaten-Karte über der Vorschau — sowie ein automatisch generiertes Inhaltsverzeichnis aus den Überschriften des Dokuments.
Kopieren, herunterladen und teilen
Kurzantwort Über die Schaltflächen unter dem Editor lässt sich die HTML-Ausgabe direkt in die Zwischenablage kopieren, der Entwurf als .md- oder .html-Datei herunterladen, oder der Inhalt über einen teilbaren Link an andere weitergeben.
Ist der Entwurf fertig, gibt es mehrere Wege, ihn weiterzuverwenden: Für ein CMS oder eine E-Mail reicht meist ein Klick auf „HTML kopieren”. Für ein Repository ist der Download als .md-Datei sinnvoller, während „Download .html” eine eigenständige HTML-Datei erzeugt. Wer den Entwurf nur teilen möchte, ohne eine Datei zu verschicken, kann die Funktion „Link kopieren” nutzen, die den Inhalt als URL-Parameter kodiert.
Für den Druck oder die PDF-Erzeugung blendet die Druckansicht Editor und Bedienelemente automatisch aus und zeigt nur die gerenderte Vorschau — praktisch für ein Handout aus Besprechungsnotizen oder einen ausgedruckten Blogbeitrags-Entwurf.
Direkt ausprobieren: Markdown schreiben, GFM-Tabellen und Aufgabenlisten testen, als HTML exportieren.
Ein README besteht meist aus einer Überschrift mit # Projektname, ein bis zwei Absätzen Beschreibung, einer Liste mit Installationsschritten (nummeriert oder mit -), einem oder mehreren eingezäunten Code-Blöcken für Befehle und optional einer GFM-Tabelle mit Funktionen oder Parametern. Die Vorlage „README” in diesem Tool liefert genau dieses Gerüst zum Anpassen.
Wie erstellt man eine Tabelle in Markdown?
In der GitHub-Flavored-Markdown (GFM)-Syntax trennt man die Kopfzeile mit |, gefolgt von einer Trennzeile wie | --- | --- |, dann den Datenzeilen. Ein Doppelpunkt in der Trennzeile steuert die Ausrichtung der Spalte. Die Markdown-Vorschau von ToolPico rendert GFM-Tabellen vollständig und live, während du tippst.
Wie zeigt man eine bestehende .md-Datei in der Vorschau an?
Nutze die Schaltfläche „MD-Datei importieren” im Tool, um eine Datei direkt von deinem Computer auszuwählen, oder füge den Inhalt per Copy-Paste in den Editor ein. Die Datei wird lokal im Browser gelesen und sofort als formatiertes HTML angezeigt — es wird nichts an einen Server hochgeladen.
Wie fügt man eine Aufgabenliste (Checkbox) in Markdown ein?
Schreibe „- [ ] Aufgabe” für eine offene und „- [x] Aufgabe” für eine erledigte Aufgabe an den Zeilenanfang. In der Vorschau von ToolPico werden diese als anklickbare Checkboxen dargestellt, und ein Klick schaltet direkt den Status im Markdown-Quelltext um.
Wie exportiert man Markdown als HTML-Datei?
Sobald die Vorschau rechts das gewünschte Ergebnis zeigt, klicke auf „HTML kopieren”, um den HTML-Quelltext in die Zwischenablage zu kopieren, oder auf „Download .html”, um eine eigenständige .html-Datei zu speichern. Beide Varianten laufen vollständig im Browser, ohne dass Inhalte an einen Server gesendet werden.
Hinweis zur Methodik: Dieser Artikel beschreibt die tatsächlichen Funktionen der ToolPico Markdown-Vorschau auf Basis der Werkzeugoberfläche. Zahlenbeispiele sind als Orientierung markiert und keine gemessenen Statistiken. Der Inhalt dient der allgemeinen Information und ersetzt keine projektspezifische technische Beratung.