---
title: "reply-media"
url: "https://claudemods.dev/zh-tw/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-tw"
content_locale: "zh-tw"
---

# 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 <question>` 詢問一個小模型，你的僅使用者技能中哪一個適合該問題。沒有問題時它會列出它們。 |
| `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/<name> && claude plugin test mods/<name>
npx -p typescript tsc -p mods/<name>
(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 <question>` 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:

<img src="docs/markdown-text.png" width="830" alt="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:

<img src="docs/markdown-callouts.png" width="830" alt="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:

<img src="docs/markdown-blocks.png" width="830" alt="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/<name> && claude plugin test mods/<name>
npx -p typescript tsc -p mods/<name>
(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/<name>/.claude-plugin/types/`. `CLAUDE.md` has the notes for changing or adding a mod.