渲染出现在 · 面板 / 弹窗收录

md-preview Markdown 预览

Claude 编辑 Markdown 时在侧栏按 GitHub 样式渲染,可前后对比。

md-preview Markdown 预览 · 效果预览 · 示意示意
> 给订单列表加上分页
⏺ 我先看看列表组件。
❯

示意。实际效果取决于 Mod、终端和运行环境。

安装

/plugin marketplace add hamzafer/claude-code-mods
/plugin install md-preview@claude-code-mods
/reload-plugins

在 Claude Code 会话里逐行执行这些命令。

它会碰什么

据原作者说明,收录时核对;可用 claude plugin validate 自行检查。

读取

有

读取被编辑的 Markdown 文件内容、git remote,以及 HOME/终端能力。

写入文件

有

在临时目录写入渲染页与 Headless Chrome 一次性配置及 PNG 截图。

运行命令

有

运行 git、gh,以及 Headless Chrome/Chromium 截图脚本。

联网

有

经 gh 调用 GitHub /markdown API;Chrome 会加载文中外链图片。

介绍

md-preview 是 Claude Code 的 function hooks Mod:Claude 编辑 .md/.mdx/.markdown 时用 toast 提示,/md 在侧栏打开类似 GitHub 的渲染预览,支持前后对比、多文件切换,以及在浏览器打开完整页。

  • 渲染优先级:已登录 gh 时走 gh api /markdown;否则内置渲染器;无 Chrome/图形终端则纯文本。
  • 注意:在有 GitHub remote 的仓库里,回合结束会在后台把 Markdown 正文经 gh 发到 GitHub API(即使未开 /md)。Headless Chrome 用一次性配置截图,脚本不会执行。
  • 依赖:Google Chrome/Chromium,以及支持图片的终端(Ghostty、kitty、iTerm2、WezTerm);tmux 下无图。

marketplace:hamzafer/claude-code-mods,插件 md-preview。需要 Claude Code 2.1.287+。下方预览为示意。

适合谁

  • 让 Claude 改 README/文档、想立即看渲染效果的人

运行要求

  • Claude Code ≥ 2.1.287
  • 完整页面预览需要 Chrome/Chromium 与支持图片的终端;tmux 下无图。
  • 可选:已登录的 gh,以便使用 GitHub 官方渲染。