Softonic

Markdown-Vorschau

Schritt 1 / 2
Nächste

Tippen Sie links, beobachten Sie das HTML-Rendering rechts. Der Vorschau-Renderer spricht GitHub-flavored Markdown: Tabellen, Aufgabenlisten, eingezäunte Codeblöcke mit Syntaxhervorhebung, Durchstreichungen, autolinkte URLs und Inline-HTML. Nützlich zum Entwerfen eines README vor dem Commit, um zu überprüfen, wie ein Kommentar in einem PR aussieht, oder einfach um die Markdown-Syntax zu lernen, indem man sieht, wie jede Eingabe gerendert wird.

So verwenden Sie den Vorschau-Renderer

  1. 1

    Markdown schreiben

    Der linke Bereich nimmt rohes Markdown auf. Jede Änderung rendert den rechten Bereich sofort neu.

  2. 2

    HTML-Vorschau ansehen

    Der rechte Bereich zeigt die gerenderte Ausgabe, die wie GitHub gestaltet ist.

  3. 3

    Modus umschalten

    Nebeneinanderansicht, nur Vorschau oder nur Quelltext für ablenkungsfreies Schreiben.

  4. 4

    HTML kopieren

    Holen Sie sich das gerenderte HTML, wenn Sie es in einen E-Mail-Client oder CMS einfügen müssen.

Was dieser Vorschau-Renderer unterstützt

  • CommonMark: Überschriften, Absätze, Hervorhebungen, Listen, Blockzitate, Codeblöcke, Links, Bilder, horizontale Regeln.
  • GFM-Erweiterungen: Tabellen mit Spaltenausrichtung, Aufgabenlisten (- [ ] und - [x]), Durchstreichungen mit ~~, autolinkte URLs und eingezäunte Codeblöcke mit Sprachhinweisen.
  • Syntaxhervorhebung: 100+ Sprachen über highlight.js, JavaScript, Python, Go, Rust, SQL, YAML usw.
  • Roh-HTML: Inline-HTML wird durchgereicht (saniert zur Sicherheit).
  • Mathematik (optional): $...$ inline und $$...$$ block, wenn Sie die Mathe-Erweiterung aktivieren.

Nicht unterstützt

  • Benutzerdefinierte Obsidian-Stil-Wikilinks ([[Seite]]), diese sind nur für Obsidian.
  • Pandoc eingezäunte Divs (:::), nur für Pandoc.
  • Server-seitige Includes oder {% ... %}-Vorlagentags.

Typische Verwendungen

  • Entwerfen Sie ein README außerhalb der IDE und fügen Sie die endgültige Version ein.
  • Überprüfen Sie die Formatierung von PR-Kommentaren vor dem Posten, das Kommentarfeld von GitHub zeigt Codeblöcke nicht richtig an.
  • Notizen in HTML umwandeln, wenn Sie formatierte Inhalte in eine E-Mail oder ein CMS einfügen müssen, das rohes HTML akzeptiert.
  • Markdown lehren, die Nebeneinanderansicht macht die Syntax offensichtlich.

Leistung

Das Rendering verwendet einen Markdown-it-Parser mit dem GFM-Plugin, das vollständig im Browser läuft. Dokumente von ein paar hundert KB werden in Millisekunden gerendert; sehr große (ein ganzes Buch in einer Datei) können beim Tippen ruckeln, teilen Sie sie in Kapitel auf, wenn das passiert.

Exportieren

  • HTML kopieren gibt Ihnen das <div> mit dem gerenderten Inhalt, einschließlich der gestylten Klassen.
  • .md herunterladen speichert die Quelle.
  • Als PDF drucken aus dem Druckdialog Ihres Browsers erzeugt eine gestylte PDF-Kopie der gerenderten Ansicht.

Häufig gestellte Fragen

GitHub wendet sein eigenes CSS über GFM an. Die HTML-Ausgabe sollte übereinstimmen; das Styling (Schriften, Abstände) gehört ihnen. Für exakte Übereinstimmung verwenden Sie den “gerendert auf GitHub”-Themenumschalter.

Ja, wenn Sie die Mathe-Erweiterung aktivieren, inline $...$ und block $$...$$ werden mit KaTeX gerendert. Es ist standardmäßig deaktiviert, um das Seitengewicht niedrig zu halten.

Es wird saniert, sichere Tags wie <div>, <span>, <table>, <img> werden durchgereicht; <script> und Inline-Ereignis-Handler werden entfernt.

Hunderte von KB funktionieren reibungslos. Bei sehr großen Dateien schalten Sie das Live-Rendering aus und rendern auf Abruf.

Das Rendering erfolgt vollständig clientseitig. Inhalte werden nirgendwohin gesendet. Wenn Sie die Seite aktualisieren, gehen Entwürfe verloren, es sei denn, der Browser bewahrt den Formularstatus.

Verwandte Tools

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

HTML-Formatter

Formatieren Sie HTML lokal im Browser mit zwei oder vier Leerzeichen Einrückung. HTML wird weder hochgeladen noch validiert.

Tool in anderen Sprachen verfügbar