So verwendest du die Markdown-Vorschau

1. Schreibe oder füge Markdown im linken Editor-Bereich ein. Die gerenderte HTML-Vorschau aktualisiert sich rechts bei jedem Tastenanschlag - keine Render-Schaltfläche erforderlich.
2. Wechsle Layouts zwischen Nebeneinander und Gestapelt mit den Werkzeugleisten-Schaltflächen. Gestapelt ist praktisch auf schmalen Laptops und Tablets, wo eine Zwei-Spalten-Ansicht den Editor zu unlesbarer Breite zerquetscht.
3. Kopiere das generierte HTML mit der "HTML kopieren"-Schaltfläche, wenn du mit dem Ergebnis zufrieden bist. Das Markup landet als Klartext in deiner Zwischenablage.
4. Iteriere weiter. Bearbeitungen der Quelle spiegeln sich sofort in der Vorschau, damit du die Überschriften-Hierarchie, Listenabstände und Link-Formulierung anpassen kannst, ohne die Seite zu verlassen.

Wie Live-Vorschau funktioniert

Der Editor ist ein einfaches <textarea>, dessen Wert an einen Preact-useState-Hook gebunden ist. Jeder Tastenanschlag löst ein Neu-Rendern aus, und der neueste Wert wird bei jeder Aktualisierung durch den Markdown-Parser übergeben. Für typische Dokumente (ein paar Kilobytes) läuft das in weit unter einer Millisekunde, sodass die Vorschau sich sofort anfühlt. Für längere Dateien ist das Parsing schnell genug, dass Debouncing keine wahrnehmbare Verbesserung erzeugen würde; React-Stil-Reconciliation aktualisiert nur die DOM-Knoten, die sich tatsächlich geändert haben.

Der Parser ist dieselbe CommonMark-artige Implementierung, die vom Geschwister-Markdown-zu-HTML-Konverter verwendet wird: Blocklevel-Scanning für Überschriften, Zäune, Listen und Zitate, dann ein Inline-Durchlauf für Hervorhebung, Code-Spans, Links und Bilder. Die Ausgabe wird in den Vorschau-DOM eingefügt, wo die Typografie-Stile der Seite das Ergebnis lesbar machen. Rendering und Eingabeverarbeitung geschehen alle im Haupt-JavaScript-Thread, was bedeutet, dass alles lokal in deinem Tab bleibt.

Situationen, wo die Vorschau glänzt

• Einen README für ein Projekt entwerfen und Überschriftenebenen und Listen-Verschachtelung beim Tippen sehen.
• Einen Release-Notes-Entwurf überprüfen, bevor er auf GitHub oder GitLab eingefügt wird, wo du nicht vorschauen kannst, bis du eingereicht hast.
• Ein Linear- oder Jira-Ticket in Markdown schreiben und vorschauen, wie es in diesen Tools gerendert wird.
• Jemanden die Unterschiede zwischen ein, zwei und drei Rautezeichen beibringen, indem man sie beobachten kann, wie Überschriften die Größe ändern.
• Einen Newsletter in Markdown in deinem Editor verfassen und das HTML in ein E-Mail-Tool einfügen.
• Dokumentation für eine Astro-, Hugo- oder Jekyll-Website offline auf einem Flug entwerfen, mit der Vorschau, die sofortiges Feedback gibt.

Wissenswerte Randfälle

• Inline-HTML in Markdown. CommonMark erlaubt rohes HTML, und die Vorschau rendert es. Das ist großartig für Callouts und benutzerdefinierte Layouts, aber sei dir dessen bewusst, was du einfügst - das ist eine implizite Vertrauensgrenze.
• Harte Zeilenumbrüche. CommonMark verbindet aufeinanderfolgende Zeilen innerhalb eines Absatzes. Um einen Umbruch zu erzwingen, beende eine Zeile mit zwei abschließenden Leerzeichen oder verwende einen Backslash. Wenn dein Text zusammengeklebt aussieht, überprüfe, ob du Break-on-Newline-Verhalten (eine GFM-Erweiterung, nicht immer aktiviert) oder den CommonMark-Standard möchtest.
• Eingezäunte Codeblöcke mit sehr langen Zeilen. Die Vorschau gibt eine horizontale Scrollleiste aus, statt zu umbrechen, was der Darstellung auf GitHub und den meisten Editoren entspricht. Wenn du Umbruch bevorzugst, style den Ausgabe-Container nach dem Kopieren des HTML.
• Tabellen. Pipe-getrennte Tabellen (eine GFM-Erweiterung) werden in der Vorschau unterstützt. Spalten richten sich an den Strichen aus; nicht übereinstimmende Zeilen-Zellenanzahlen erzeugen Zeilen mit weniger oder leeren Zellen statt Fehler.
• Intelligente Typografie. Der Parser ersetzt keine geraden Anführungszeichen durch geschweifte oder -- durch einen Gedankenstrich. Dieses Verhalten lebt in Smart-Typography-Plugins schwererer Bibliotheken wie markdown-it-smartypants.

Warum Vorschau in Markdown-Workflows wichtig ist

Markdowns Attraktivität kommt vom Lesbarsein als Klartext, doch die gerenderte Ausgabe ist das, was ausgeliefert wird. Kleine Mehrdeutigkeiten - ob zwei abschließende Leerzeichen einen Zeilenumbruch erzeugen, ob eine Überschrift eine Leerzeile davor benötigt, ob Backticks um Code, der einen Backtick enthält, verdoppelt werden müssen - tauchen nur beim Rendern auf. Live-Vorschau verkürzt den Feedback-Zyklus von "committen und auf GitHub schauen" auf "Tastenanschlag". Editoren mit integrierten Vorschauen (VS Code, Typora, Obsidian) popularisierten das Muster genau aus diesem Grund. CommonMark formalisierte die Regeln, denen eine Vorschau folgen soll, sodass ein Dokument, das in einer konformen Vorschau korrekt rendert, überall dasselbe rendern sollte.

Wie dieses Tool im Vergleich zu Editor-integrierten Vorschauen abschneidet

VS Codes Markdown-Vorschau verwendet markdown-it mit Syntax-Hervorhebung und einer Handvoll GitHub-artige Erweiterungen. Typora rendert in einem Live-Einzel-Pane-Editor, bei dem Quelle und Ausgabe dieselbe Ansicht sind. Obsidian und Logseq bieten Live-Vorschauen mit Wiki-Stil-Backlink-Erweiterungen, die kein Teil von Markdown proper sind. grip rendert eine lokale Markdown-Datei durch GitHubs eigene API für pixel-perfekte GFM-Vorschau. All diese sind besser, wenn du in einem spezifischen Editor bist; dieses Web-Tool ist die Zero-Install-Option für eine schnelle Überprüfung auf jedem Rechner mit einem Browser, und seine Nur-lokal-Ausführung bedeutet, dass du Entwürfe sensibler Inhalte vorschauen kannst, ohne in einen Cloud-Dienst hochzuladen.