--- title: "reply-media" url: "https://claudemods.dev/zh-cn/builds/reply-media-07c241" source: "https://github.com/NateCC0902/NeonCoat/tree/main/mods/reply-media" source_type: "github" repo: "https://github.com/NateCC0902/NeonCoat/tree/main/mods/reply-media" author: "NateCC0902" author_handle: "NateCC0902" stars: 0 category: "主题与外观" categories: ["themes"] tags: ["hooks", "kitty-graphics", "latex", "mermaid", "terminal-rendering"] permission_level: 2 scan_complete: true install: "claude plugin marketplace add NateCC0902/NeonCoat\nclaude plugin install reply-media" added: "2026-10-11T20:08:29.398Z" updated: "2026-10-11T15:49:13Z" locale: "zh-cn" content_locale: "zh-cn" --- # reply-media 将回复中的 mermaid 围栏、数学公式和本地图片作为图片绘制在终端中，并播放其本地视频（kitty 图形：Ghostty、kitty） ## Description # NeonCoat 适用于 [Claude Code](https://claude.com/claude-code) 的模组和状态行。回复中的图表、公式、图片和视频都会以图片形式绘制在终端中，其 markdown 以彩色绘制，状态行会显示该会话的花费。 ![在终端中绘制的 Claude Code 回复：一个流程图、一个公式、一个表格、一个任务列表、一个标注、一个代码卡片，然后一个视频就地播放](docs/demo.gif) ## 这里面有什么 | 路径 | 作用 | | --- | --- | | `mods/reply-media/` | 将 `mermaid` 围栏、公式（`math` 围栏和 `$$` 块）以及本地图片（单独占一行的 `![alt](path)`）绘制为图片。以图片形式书写的本地视频会以其第一帧加上播放按钮绘制，并就地播放。每张图片下方，一个按钮复制其源内容，另一个按钮在窗格中将其放大打开。 | | `mods/reply-markdown/` | 以彩色绘制标题、列表、任务列表、引用、标注（`> [!WARNING]`）、分隔线和表格，并将每个代码围栏放入带复制按钮的卡片中。 | | `mods/skill-router/` | `/skill-router ` 询问一个小模型，你的仅用户技能中哪一个适合该问题。没有问题时它会列出它们。 | | `statusline.mjs` | 状态行。第一行：已用上下文、花费、模型、每秒 token 数、文件夹、缓存命中率、git 状态。第二行：订阅窗口及其刷新时间、Remote Control，以及机器上运行的其他会话。 | ## 要求 - 带模组 API（函数钩子插件）的 Claude Code。该 API 为早期访问，在这些模组下可能发生变化。最后在 Claude Code 2.1.296 上运行。 - macOS。图片脚本会调用 `sips` 和 `open`。 - 对于 `reply-media`，需要一个支持 kitty 图形协议的终端：Ghostty 或 kitty。 - Node.js，并且对于 `reply-media`： ```bash brew install librsvg ffmpeg ``` ## 安装 ```bash git clone https://github.com/NateCC0902/NeonCoat.git cd NeonCoat/mods/reply-media/render && npm install ``` 然后将 `~/.claude/settings.json` 指向克隆目录。`CLAUDE_CODE_PLUGIN_DIRS` 以冒号分隔，每个 mod 一个条目（不会扫描父文件夹），因此请省略你不需要的 mod： ```json { "env": { "CLAUDE_CODE_PLUGIN_DIRS": "/path/to/NeonCoat/mods/reply-media:/path/to/NeonCoat/mods/reply-markdown:/path/to/NeonCoat/mods/skill-router" }, "statusLine": { "type": "command", "command": "node /path/to/NeonCoat/statusline.mjs", "padding": 0, "refreshInterval": 5 } } ``` 之后启动的会话会加载这些 mod。这些文件从克隆目录实时加载：已保存的 mod 文件会在运行中的会话里热重载，因此一次错误的编辑会破坏所有会话的终端 UI。 ## 选项 每个 mod 的选项是 `/config` 中的行，改动会立即生效。 | Mod | 选项 | 默认值 | 它改变什么 | | --- | --- | --- | --- | | 三者全部 | `enabled` | `true` | 关闭该 mod 而不移除它。 | | `reply-media` | `pxPerColumn` | `8` | 每个终端列的图片像素数。数值越低，图片绘制得越大。 | | `reply-media` | `cellAspect` | `2.17` | 一个终端单元格的高度是宽度的多少倍。当图片看起来被压扁或拉伸时，请更改此值。 | | `reply-media` | `resumedReplies` | `3` | 恢复的会话中最后多少条回复会重新绘制其图片。 | | `reply-markdown` | `tableBorder` | `bold` | `round`、`single` 或 `bold`。 | | `reply-markdown` | `cardBorder` | `round` | 代码卡片和标注框的边框：`round`、`single` 或 `bold`。 | ## 检查 更改后，从仓库根目录运行这些命令： ```bash claude plugin validate mods/ && claude plugin test mods/ npx -p typescript tsc -p mods/ (cd mods/reply-media/render && npm test) echo '{}' | node statusline.mjs && node --test statusline.test.mjs ``` ## Install ``` claude plugin marketplace add NateCC0902/NeonCoat claude plugin install reply-media ``` ## Original README # NeonCoat Mods and a status line for [Claude Code](https://claude.com/claude-code). A reply's diagrams, formulas, images and videos are drawn as pictures in the terminal, its markdown is drawn in color, and the status line says what the session is costing. ![A Claude Code reply drawn in the terminal: a flowchart, a formula, a table, a task list, a callout, a code card, then a video playing in place](docs/demo.gif) ## What is in here | Path | What it does | | --- | --- | | `mods/reply-media/` | Draws `mermaid` fences, formulas (`math` fences and `$$` blocks) and local images (`![alt](path)` on a line of its own) as pictures. A local video written as an image is drawn as its first frame with a play button, and plays in place. Under each picture, one button copies its source and one opens it larger in a pane. | | `mods/reply-markdown/` | Draws headings, lists, task lists, quotes, callouts (`> [!WARNING]`), rules and tables in color, and puts each code fence in a card with a copy button. | | `mods/skill-router/` | `/skill-router ` asks a small model which of your user-only skills fits the question. With no question it lists them. | | `statusline.mjs` | The status line. First row: context used, cost, model, tokens per second, folder, cache hit rate, git state. Second row: subscription windows and when they refill, Remote Control, and the other sessions running on the machine. | ## What `reply-markdown` draws Headings, lists, a quote, a rule, and bold, italic and inline code: A reply with three levels of heading, a nested bullet list, a numbered list, a quote and a rule, each in its own color The five callouts: Note, Tip, Important, Warning and Caution, each a box in its own color A table, a task list, and a code fence as a card with its copy button: A framed table, a task list with two items ticked, and a TypeScript snippet in a card with a copy button ## Requirements - Claude Code with the mod API (function-hook plugins). The API is early access and may change under these mods. Last run on Claude Code 2.1.296. - macOS. The picture scripts call `sips` and `open`. - For `reply-media`, a terminal that speaks the kitty graphics protocol: Ghostty or kitty. - Node.js, and for `reply-media`: ```bash brew install librsvg ffmpeg ``` ## Install ```bash git clone https://github.com/NateCC0902/NeonCoat.git cd NeonCoat/mods/reply-media/render && npm install ``` Then point `~/.claude/settings.json` at the clone. `CLAUDE_CODE_PLUGIN_DIRS` is colon-separated with one entry per mod (a parent folder is not scanned), so leave out the mods you do not want: ```json { "env": { "CLAUDE_CODE_PLUGIN_DIRS": "/path/to/NeonCoat/mods/reply-media:/path/to/NeonCoat/mods/reply-markdown:/path/to/NeonCoat/mods/skill-router" }, "statusLine": { "type": "command", "command": "node /path/to/NeonCoat/statusline.mjs", "padding": 0, "refreshInterval": 5 } } ``` The mods load in sessions started after that. These files are loaded live from the clone: a saved mod file hot-reloads in running sessions, so a broken edit breaks the terminal UI of all of them. ## Tell Claude what to write `reply-media` draws only what Claude writes in the forms it knows: a `mermaid` fence, a `math` fence, an image on a line of its own. Claude does not write them unprompted, so add these notes to `~/.claude/CLAUDE.md`. The Formatting note does the same for the forms `reply-markdown` draws only when Claude chooses to write them. ````markdown Diagrams: Draw diagrams in replies as ```mermaid code fences, never as ASCII art. The reply-media mod turns each fence into a picture in the terminal. Use only these types, the rest do not render: flowchart, stateDiagram-v2, sequenceDiagram, classDiagram, erDiagram, xychart-beta. Start the fence at column 0: an indented fence (inside a list item or a quote) is not picked up. Prefer flowchart LR: a TD chart with more than a few nodes fills the terminal's height. For a flowchart with a cycle, declare the node the back-edge leaves from on a line of its own before any edge (e.g. `T{test}`), or the layout draws that node above the one before it. Directory trees and tables are not diagrams: keep them as text. Math: Write a formula that stands on a line of its own as LaTeX in a ```math code fence, one formula per fence, starting at column 0. The same mod turns it into a picture. Leave out `\tag`: a tagged formula is not drawn. Write math inside a sentence in Unicode (a⃗ · b⃗ = |a||b|cos θ), never as `$x$`: a picture cannot sit inside a line of text. Images: To show an image file from this machine, write `![alt](path)` on a line of its own, starting at column 0. The same mod draws it. The path is absolute, under `~/`, or relative to the session's working directory. An image at a URL is not fetched, so give its link as text. A video file (mp4, mov, webm, mkv, gif) written the same way is shown as its first frame with a play button. Formatting: For a warning or a note I must not miss, write a GitHub alert: a quote whose first line is `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]` or `[!CAUTION]`. It becomes a colored box. For steps or checks to tick off, write a task list: `- [ ]` and `- [x]`. Put a command or snippet I will copy in a code fence of its own, with its language, not in inline code: the fence gets a copy button. ```` ## Options Each mod's options are rows in `/config`, and a change takes effect at once. | Mod | Option | Default | What it changes | | --- | --- | --- | --- | | all three | `enabled` | `true` | Turns the mod off without removing it. | | `reply-media` | `pxPerColumn` | `8` | Pixels of a picture per terminal column. Lower draws pictures larger. | | `reply-media` | `cellAspect` | `2.17` | How many times taller than wide one terminal cell is. Change it when pictures look squashed or stretched. | | `reply-media` | `resumedReplies` | `3` | How many of a resumed session's last replies get their pictures drawn again. | | `reply-markdown` | `tableBorder` | `bold` | `round`, `single` or `bold`. | | `reply-markdown` | `cardBorder` | `round` | The border of a code card and of a callout box: `round`, `single` or `bold`. | ## Colors The colors are written into the code to match one dark theme, which is not in this repo. For another theme, edit the constants at the top of each file: `COLORS` in `statusline.mjs`, `COLOR` and `CALLOUT` in `mods/reply-markdown/hooks/register.tsx`, and `THEME` in `mods/reply-media/render/render.mjs`. ## Checks Run these after a change, from the repo's root: ```bash claude plugin validate mods/ && claude plugin test mods/ npx -p typescript tsc -p mods/ (cd mods/reply-media/render && npm test) echo '{}' | node statusline.mjs && node --test statusline.test.mjs ``` The types check works once Claude Code has loaded the mod and written its types to `mods//.claude-plugin/types/`. `CLAUDE.md` has the notes for changing or adding a mod.