pi-code-render0.1.10
Render fenced code blocks in Pi's transcript as styled, flush-edge cards with one-click copy and a raw-text toggle.
Untested on omp
This is a pi package. No one has reported whether it works on omp yet. If you try it, add your result below.
Reports 0
No reports yet.
Readme
pi-code-render
把 Pi 终端里的代码块渲染成带一键复制按钮的卡片。
English | 中文
pi-code-render 是 Pi coding agent 的扩展。它把 assistant 消息中的
围栏代码块渲染成主题配色的整宽卡片,右上角带一个 [COPY] 按钮,点击卡片任意位置
即可切回原始 markdown 文本。

效果对比
| Pi 原生渲染 | 使用 pi-code-render |
|---|---|
![]() |
![]() |
功能
- 代码卡片 — assistant 消息中的代码块渲染成主题配色的整宽面板,风格与 Pi 原生的
codemode 面板一致。
[COPY]按钮位于代码首行行尾,因此代码上方没有多余的语言标签行, 代码紧接着卡片顶部开始。 - 一键复制 — 右上角
[COPY]按钮把该代码块源码(已去掉围栏)复制到剪贴板。Ctrl+Alt+C可在任意位置复制最近渲染的代码块。 - 原文切换 — 点击卡片任意位置可在卡片与原始围栏文本之间切换,再次点击即恢复。
- 智能高亮 — 形如
```js workflow的 info string 会按 JavaScript 高亮; 未知语言保留纯文本渲染。 - 剪贴板优先用原生实现 — 优先使用 Pi 的原生剪贴板助手,失败时回退到
pbcopy/wl-copy/xclip/clip。 - 临时提示 — 复制成功后在页脚显示状态,2 秒后自动清除,不会留在对话记录里。
- 不动你的消息 — 你自己发的消息和 thinking 块中的代码块保持 Pi 原生渲染。
安装
pi install npm:pi-code-render
安装后重启 Pi,或执行 /reload。
使用
| 操作 | 结果 |
|---|---|
点击 [COPY] |
复制该代码块源码到剪贴板 |
| 点击卡片其他位置 | 在卡片与原始围栏文本之间切换 |
| 点击原始文本里的代码 | 折回卡片 |
| 在原始文本的代码上拖动 | 按普通文本选中(Pi 的选中即复制会一并复制) |
Ctrl+Alt+C |
复制最近渲染的代码块 |
原始围栏文本保持可选中:代码区域交给 Pi 的文本选择,拖动或双击即可选中并复制; 原地单击则把该块折回卡片。
兼容性
- 需要 Pi 0.99.0 或更高版本。
- 在 regular 和 fullscreen TUI 模式下均可工作;非 TUI 模式不受影响。
- 卡片效果通过 patch Pi 内部的 Markdown 渲染器实现,该渲染器目前没有公开的 transcript 样式钩子。未来 Pi 版本可能需要本包跟进更新。
- 启动自检:每次 session start 时,扩展会用固定样例渲染一遍并校验卡片形状。 如果 Pi 内部结构变化导致 patch 不再成立,扩展会还原为原生渲染并发出一条 warning 说明原因,而不是静默失效。CI 会对最新版和上一 minor 的 Pi 各跑一遍 测试,尽量在发版前发现这类变化。
卸载
pi remove npm:pi-code-render
License
MIT
开发
npm run typecheck # tsc --noEmit
npm test # 渲染测试(node test/render.test.mjs)
