Was ist Markdown-Vorschau?
Markdown ist die leichtgewichtige Formatierungssyntax hinter READMEs, Blog-Posts, Chat-Nachrichten, Dokumentation und unzähligen weiteren Anwendungsbereichen.
Dieser Viewer rendert Ihr Markdown in Echtzeit, während Sie tippen.
Wann Sie diesen Rechner verwenden
- Sie schreiben ein GitHub- oder GitLab-README und möchten die Formatierung vor dem Committen überprüfen
- Sie entwerfen einen Markdown-Beitrag für eine Blog-Plattform, Dokumentation oder Wiki
- Sie testen eine Markdown-E-Mail oder Chat-Nachricht, bevor Sie sie senden
- Sie lernen Markdown-Syntax durch Experimentieren mit verschiedenen Formatierungen
- Sie wandeln ein kleines Markdown-Snippet für CMS oder E-Mail-Vorlagen in HTML um
- Sie debuggen ein Markdown-Dokument, bei dem einige Formatierungen nicht wie erwartet gerendert werden
Schritte:
- Tippen oder fügen Sie Ihr Markdown in das linke Panel ein.
- Sehen Sie sich die sofort aktualisierte HTML-Vorschau auf der rechten Seite an.
- Passen Sie Ihre Syntax an, bis die Vorschau Ihren Erwartungen entspricht.
- Kopieren Sie Ihre fertige Markdown-Quelle, wenn Sie mit dem Ergebnis zufrieden sind.
Formel
# Überschrift →
Überschrift
**fett** → fett *kursiv* → kursiv `code` →code
[Text](url) → Text
- Element → - Element
Anwendungsfälle
- GitHub- oder GitLab-READMEs vor dem Committen überprüfen
- Formatierte Nachrichten für Slack, Discord oder andere Markdown-fähige Chat-Apps entwerfen
- Blog-Posts oder Dokumentation vor der Veröffentlichung testen
- Markdown-Syntax lernen mit Experimenten und sofortigem Feedback
- Ein kleines Markdown-Snippet schnell in HTML umwandeln
Hauptvorteile
- Sehen Sie Ihre Markdown-Quelle und die sofort gerenderte Ausgabe nebeneinander
- Erfassen Sie Syntaxfehler, bevor Sie irgendwo veröffentlichen
- Vollständig offline in Ihrem Browser — nichts wird hochgeladen
- Kostenlos, kein Konto, keine Dateigrößenbeschränkung für den normalen Gebrauch
Professionelle Tipps
- Fügen Sie eine Leerzeile vor und nach Listen und Codeblöcken hinzu
- Verwenden Sie doppelte Sterne für Fettung und einzelne Sterne (oder Unterstriche) für Kursiv
- Überprüfen Sie zuerst hier, dann die Zielplattform
- Halten Sie Überschriften hierarchisch (überspringen Sie nicht von # bis ###)
Häufige Fehler vermeiden
- Die erforderliche Leerzeile zwischen Absatz und Liste vergessen
- Das Leerzeichen nach dem #-Zeichen in Überschriften vergessen
- Einen Code-Zaun (```) nicht schließen
- Einfache Sterne statt doppelter Sterne für Fettung verwenden
Wichtige Begriffe erklärt
- CommonMark: Eine standardisierte Spezifikation der Markdown-Syntax, entwickelt, um Inkonsistenzen zu verringern
- GFM: GitHub-Flavored Markdown, eine erweiterte Dialekt mit Tabellen- und Aufgabenlisten-Unterstützung
- Code-Fence: Ein durch dreifache Backticks (```) abgegrenzter Block zur Formatierung mehrzeiligen Codes
- Inline-Formatierung: Formatierung innerhalb einer einzelnen Zeile, wie *kursiv* oder `Code`
Verwandte Konzepte
- JSON-Formatter
- Regex-Tester
- Passwort-Generator
- Farbkonverter
- URL-Encoder/Decoder
Beispiel
"## Hallo
Das ist **fett** und das ist *kursiv*." wird als Überschrift 2. Grades gerendert.
Interpretation Ihrer Ergebnisse
Das linke Panel zeigt Ihre rohe Markdown-Quelltext an, während das rechte Panel ihn als formatiertes HTML in Echtzeit rendert.
Häufige Darstellungsprobleme entstehen oft durch Abstände.
Die Vorschau ist eine gute Annäherung daran, wie Ihr Markdown auf den meisten Plattformen aussehen wird.