md-preview: Claude Code Markdown-Vorschau in einem Seitenbereich

md-preview ist eine Community-Mod von Hamza Zafar (hamzafer) aus seiner Sammlung claude-code-mods. Sie bringt eine Claude Code Markdown-Vorschau mit: Wenn Claude eine .md-, .mdx- oder .markdown-Datei schreibt oder bearbeitet, meldet ein Toast README.md changed · /md to preview, und /md öffnet neben dem Chat einen Bereich, der die Datei so gerendert zeigt, wie GitHub sie darstellt.

Der Bereich hat Schaltflächen für Prev, Next, Before, Render, Text, Browser und Close, jeweils mit Tastenkürzel (p, n, b, r, t, o, q). Mit n und p blätterst du durch die Markdown-Dateien, die in dieser Sitzung geändert wurden. b zeigt die Datei so, wie sie vor der ersten Bearbeitung des Turns war, neben ihrem aktuellen Text, und die Blöcke, die die letzte Bearbeitung geändert hat, bekommen einen grünen Balken. /md compare <a> <b> stellt zwei Dateien nebeneinander, und o oder /md open öffnet dieselbe Seite in deinem eigenen Browser.

Wie die Seite gezeichnet wird, hängt von deiner Umgebung ab. In einem Bild-Terminal (Ghostty, iTerm2, WezTerm oder kitty, nicht über tmux) mit installiertem Chrome oder Chromium wird die Seite als PNG gezeichnet und im Bereich angezeigt. Andernfalls zeigt der Bereich eine Textansicht, in der Überschriften, Listen, Tabellen und Codeblöcke mit Terminalfarben gestaltet sind. Das Manifest nennt keine Mindestversion von Claude Code.

Die Aufnahme startet Claude Code mit geladener Mod im kleinen Demo-Projekt und führt /md README.md aus. Der Befehl antwortet mit den Tastenhinweisen (n/p: next/previous · b: before | after · o: browser · r: render again · t: page/text · q: close), und über dem Prompt öffnet sich ein umrandeter Bereich. Die erste Zeile enthält die Schaltflächen, die zweite lautet README.md 1/1, und darunter erscheint die README des Projekts in der Textansicht: die Überschrift demo-app und die Zeile „A tiny demo app. Run it with npm start.“ mit farbig hervorgehobenem Code-Span. Das Demo-Terminal kann keine Bilder anzeigen, deshalb zeigt es die Textansicht statt der gerenderten Seite.

Nutze eine beliebige Methode aus dem Installationsblock; alle installieren direkt aus dem eigenen Marketplace des Autors. Führe nach der Installation /reload-plugins aus oder starte eine neue Sitzung, dann nutze /md.

Die Mod besteht aus einem Function-Hooks-Modul, hooks/register.tsx, dazu einem kleinen Markdown-Parser (hooks/md.ts) und einem HTML-Seitengenerator (hooks/page.ts). Ein tool.call-Hook liest die Datei vor einem Write-, Edit- oder MultiEdit-Aufruf auf einem Markdown-Pfad, lässt den Aufruf laufen und gibt sein Ergebnis unverändert zurück. Der GitHub-Renderer aus hooks/register.tsx:

const repo = await repoOf($, dir)
if (!repo) return null // not in a GitHub repo: the Markdown stays on this machine
const r = await $.process
  .run(['gh', 'api', '-X', 'POST', '/markdown', '--input', '-'], { stdin: JSON.stringify({ text: md, mode: 'markdown', context: repo }), timeoutMs: GH_TIMEOUT_MS })
  .catch(() => null)

repoOf fragt git remote -v nach einem GitHub-Remote. Schlägt gh fehl, wird das GitHub-Rendering für eine Minute pausiert und der eingebaute Renderer verwendet. Das HTML wird nach $TMPDIR/md-preview/ geschrieben und über ein kurzes sh-Skript mit headless Chrome gezeichnet, immer nur eine Zeichnung gleichzeitig, wobei die Zeichnungen nach Inhalt zwischengespeichert werden. Von Claude bearbeitete Dateien werden nach dem Ende des Turns im Hintergrund gezeichnet, sodass /md meist eine Seite öffnet, die bereits fertig gezeichnet ist.

In /config gibt es keine Optionen. Alles läuft über den Befehl und die Tasten im Bereich: /md öffnet die neueste Datei, /md <path> öffnet eine beliebige Markdown-Datei, /md compare <a> <b> vergleicht zwei, /md open öffnet den Browser. Belegt ein anderer Befehl bereits den Namen /md, registriert die Mod stattdessen /mdview. Um Grenzen wie die Liste der Chrome-Pfade (CHROMES), die Zahl der gemerkten Dateien (MAX_FILES) oder die Cache-Größe (CACHE_SIZE) zu ändern, bearbeite die Konstanten oben in register.tsx.

Wir lesen jede Datei, die das Plugin ausführen kann, bevor wir es starten: plugin.json, hooks/hooks.json, hooks/register.tsx, hooks/md.ts, hooks/page.ts, die Typdeklarationen und die Tests. Es gibt keine package.json, kein Installationsskript, keine Binärdatei und keinen gebündelten Code, und wir haben keine versteckten oder Zero-Width-Zeichen gefunden.

• Netzwerk: keine direkten Anfragen. Mit einem GitHub-Remote und angemeldetem gh wird der Markdown-Text über gh api an die /markdown-API von GitHub gesendet (register.tsx:592-594), ohne zusätzliche Zustimmung. Dateien über etwa 390 KB werden lokal gerendert. Die gerenderte Seite wird von headless Chrome mit einer Content-Security-Policy geladen, die Bilder von beliebigen Hosts erlaubt (page.ts:97), sodass entfernte Bilder in einer Markdown-Datei beim Zeichnen der Seite abgerufen werden. Skripte im Markdown können nicht laufen.
• Prozesse: git ls-files und git remote -v (register.tsx:386, 607), gh api (593), sh -c mit einem festen Skript, das headless Chrome startet und nur das selbst gestartete Chrome beendet (49-67, 675), sowie open oder xdg-open für die Browser-Schaltfläche (788).
• Dateischreibzugriffe: nur $TMPDIR/md-preview/ (Seiten-HTML, PNG-Teile und ein Wegwerf-Profil für Chrome). Nichts unter ~/.claude, keine Einstellungen, Shell-Dateien, LaunchAgents oder Git-Hooks.
• Dateilesezugriffe: Markdown-Dateien, die Claude bearbeitet, Dateien, die du angibst, und vor dem ersten Shell-Befehl eines Turns bis zu 200 Markdown-Dateien des Repos aus git ls-files.
• Umgebung: HOME, TMPDIR, TMUX, TERM_PROGRAM und TERM. Sie werden nirgendwohin gesendet.
• Daemons, Telemetrie, Prompt-Injection: keine. Die Mod fügt Prompts oder Tool-Ergebnissen keinen Text hinzu.
• Gating: Der tool.call-Hook ist ein Beobachter. Er wartet auf den Aufruf und gibt das Ergebnis unverändert zurück. validate vermerkt ihn als Gating-Hook ohne .catch; der erste Shell-Aufruf eines Turns wartet auf den Markdown-Snapshot, der nur Dateien liest.
• Externe Voraussetzungen: Chrome, Chromium, Edge oder Brave für die gerenderte Ansicht, ein bildfähiges Terminal und optional gh. Alles ist optional; als Rückfall dient eine Textansicht.
• Lizenz: MIT, mit einer LICENSE-Datei im Wurzelverzeichnis des Repositorys.

claude plugin validate meldete keine Fehler oder Warnungen, und die 26 Tests des Autors liefen unter Claude Code 2.1.291 durch.

Geprüft mit Claude Code 2.1.291 unter macOS (validate, Tests und die Aufnahme). Wenn der Bereich nicht so aussieht wie erwartet:

• /md ist unbekannt: Prüfe, ob /plugin md-preview als geladen anzeigt, oder versuche /mdview.
• Du siehst Text statt einer Seite: Dein Terminal kann keine Bilder anzeigen, du bist in tmux, oder es wurde kein Chrome gefunden. Drücke nach der Behebung r, oder t, um die Ansicht zu wechseln.
• „Chrome could not draw the page“: Drücke r, um es erneut zu versuchen. Die Mod versucht es nicht von selbst noch einmal.
• Eine Änderung an einer Datei löst keinen Toast aus: Nur Markdown-Pfade werden verfolgt, und Schreibvorgänge aus der Shell werden nur in einem Git-Repository erkannt.
• Der Bereich zeigt built-in statt GitHub: Die Datei liegt nicht in einem GitHub-Repo, gh ist abgemeldet, oder sie ist größer als etwa 390 KB.