md-preview: vista previa de Markdown en Claude Code en un panel lateral

md-preview es un mod de la comunidad creado por Hamza Zafar (hamzafer), parte de su colección claude-code-mods. Añade una vista previa de Markdown en Claude Code: cuando Claude escribe o edita un archivo .md, .mdx o .markdown, un toast dice README.md changed · /md to preview, y /md abre un panel junto al chat que muestra el archivo renderizado tal como lo muestra GitHub.

El panel tiene botones Prev, Next, Before, Render, Text, Browser y Close, cada uno con su tecla rápida (p, n, b, r, t, o, q). Las teclas n y p recorren los archivos Markdown modificados en esta sesión. b muestra el archivo tal como era antes de la primera edición del turno junto a su texto actual, y los bloques que cambió la última edición reciben una barra verde. /md compare <a> <b> pone dos archivos lado a lado, y o o /md open abre la misma página en tu propio navegador.

Cómo se dibuja la página depende de tu configuración. En una terminal con imágenes (Ghostty, iTerm2, WezTerm o kitty, no a través de tmux) y con Chrome o un Chromium instalado, la página se dibuja como PNG y se muestra en el panel. Si no, el panel muestra una vista de texto con encabezados, listas, tablas y bloques de código con estilos de colores de terminal. El manifiesto no indica ninguna versión mínima de Claude Code.

La grabación inicia Claude Code con el mod cargado en el pequeño proyecto de demostración y ejecuta /md README.md. El comando responde con las indicaciones de teclas (n/p: next/previous · b: before | after · o: browser · r: render again · t: page/text · q: close), y se abre un panel con borde sobre el prompt. Su primera fila contiene los botones, la segunda dice README.md 1/1, y debajo aparece el README del proyecto en la vista de texto: el encabezado demo-app y la línea "A tiny demo app. Run it with npm start." con el fragmento de código en color. La terminal de la demo no puede mostrar imágenes, así que muestra la vista de texto en lugar de la página renderizada.

Usa cualquiera de los métodos del bloque de instalación; instalan directamente desde el marketplace del propio autor. Después de instalar, ejecuta /reload-plugins o inicia una sesión nueva y luego usa /md.

El mod es un único módulo de function hooks, hooks/register.tsx, más un pequeño parser de Markdown (hooks/md.ts) y un generador de páginas HTML (hooks/page.ts). Un hook tool.call lee el archivo antes de una llamada Write, Edit o MultiEdit sobre una ruta Markdown, deja que la llamada se ejecute y devuelve su resultado sin cambios. Este es el renderizador de GitHub, de 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 consulta git remote -v en busca de un remoto de GitHub. Si gh falla, el renderizado con GitHub se pausa durante un minuto y se usa el renderizador integrado. El HTML se escribe en $TMPDIR/md-preview/ y se dibuja con Chrome en modo headless mediante un breve script sh, un dibujo cada vez, con los dibujos en caché según su contenido. Los archivos que Claude editó se dibujan en segundo plano cuando termina el turno, así que /md normalmente se abre sobre una página ya dibujada.

No hay opciones en /config. Todo se hace con el comando y las teclas del panel: /md abre el último archivo, /md <path> abre cualquier archivo Markdown, /md compare <a> <b> compara dos y /md open abre el navegador. Si otro comando ya usa el nombre /md, el mod registra /mdview en su lugar. Para cambiar límites como la lista de rutas de Chrome (CHROMES), el número de archivos que se conservan (MAX_FILES) o el tamaño de la caché (CACHE_SIZE), edita las constantes al principio de register.tsx.

Leemos todos los archivos que el plugin puede ejecutar antes de ponerlo en marcha: plugin.json, hooks/hooks.json, hooks/register.tsx, hooks/md.ts, hooks/page.ts, las declaraciones de tipos y los tests. No hay package.json, script de instalación, binario ni código empaquetado, y no encontramos caracteres ocultos ni de ancho cero.

• Red: ninguna petición directa. Con un remoto de GitHub y gh con la sesión iniciada, el texto Markdown se envía a la API /markdown de GitHub mediante gh api (register.tsx:592-594), sin ninguna activación adicional. Los archivos de más de unos 390 KB se renderizan localmente. La página renderizada la carga Chrome en modo headless con una Content-Security-Policy que permite imágenes de cualquier host (page.ts:97), así que las imágenes remotas de un archivo Markdown se descargan cuando se dibuja la página. Los scripts del Markdown no pueden ejecutarse.
• Procesos: git ls-files y git remote -v (register.tsx:386, 607), gh api (593), sh -c con un script fijo que inicia Chrome en modo headless y detiene solo el Chrome que inició (49-67, 675), y open o xdg-open para el botón del navegador (788).
• Escritura de archivos: solo $TMPDIR/md-preview/ (el HTML de la página, las partes PNG y un perfil de Chrome desechable). Nada bajo ~/.claude, ajustes, archivos de shell, LaunchAgents ni hooks de git.
• Lectura de archivos: los archivos Markdown que edita Claude, los archivos que tú indicas y, antes del primer comando de shell de un turno, hasta 200 archivos Markdown del repositorio obtenidos de git ls-files.
• Entorno: HOME, TMPDIR, TMUX, TERM_PROGRAM y TERM. No se envían a ningún sitio.
• Daemons, telemetría, inyección de prompts: ninguno. No añade texto a los prompts ni a los resultados de herramientas.
• Bloqueo: el hook tool.call es un observador. Espera a la llamada y devuelve el resultado sin cambios. validate lo señala como un hook de bloqueo sin .catch; la primera llamada de shell de un turno espera a la instantánea de Markdown, que solo lee archivos.
• Requisitos externos: Chrome, Chromium, Edge o Brave para la vista renderizada, una terminal con soporte de imágenes y, opcionalmente, gh. Todos son opcionales; la vista de texto es la alternativa.
• Licencia: MIT, con un archivo LICENSE en la raíz del repositorio.

claude plugin validate no informó de errores ni avisos, y los 26 tests del autor pasaron en Claude Code 2.1.291.

Comprobado con Claude Code 2.1.291 en macOS (validate, tests y la grabación). Si el panel no es lo que esperas:

• /md es desconocido: comprueba que /plugin muestra md-preview cargado, o prueba /mdview.
• Ves texto en lugar de una página: tu terminal no puede mostrar imágenes, estás dentro de tmux o no se encontró ningún Chrome. Pulsa r después de arreglarlo, o t para cambiar de vista.
• "Chrome could not draw the page": pulsa r para volver a intentarlo. El mod no reintenta por su cuenta.
• Un cambio en un archivo no muestra un toast: solo se siguen las rutas Markdown, y las escrituras desde la shell solo se detectan en un repositorio git.
• El panel dice built-in en lugar de GitHub: el archivo no está en un repositorio de GitHub, gh no tiene la sesión iniciada o el archivo supera unos 390 KB.