用户代码块渲染 VictorKozachek/dsh-user-code-block

dsh-user-code-block

DeepSeek Harness Desktop（DSH）插件，在用户消息里渲染围栏代码块：外框、语言标签、语法高亮和复制按钮。消息其余部分保持纯文本。

兼容性

- DeepSeek Harness Desktop 0.2.1-rc.3 —— 已验证；0.1.x 版本暴露的扩展点相同
- 任何挂载了 ui-chat 客户端包的 DSH 配置档（desktop 或 web）
- 开发和测试套件需要 Node.js 20+
- 无运行时依赖，无构建步骤

为什么需要它

助手消息按 markdown 渲染（AssistantMarkdown），用户消息则走 UserText 原语：纯文本加 white-space: pre-wrap。所以围栏代码块

print("hi")

在你自己的消息里会带着反引号显示——没有高亮，没有外框。插件只加一个例外：识别围栏，按助手回复里代码块的方式渲染。链接、@ 提及和其他内置 UserText 节点照旧工作。

识别规则

- 三个及以上反引号或波浪线组成的围栏；
- 最多三个空格缩进（四个空格就不再算围栏）；
- 语言取 info string 的第一个词：- 四个反引号的围栏能正确包含内部的三反引号；
- 未闭合的围栏不当作代码块：漏写反引号不会把剩余文本变成代码。

单反引号（inline code）不管——那不是代码块。

高亮

颜色取自 DSH 已经发布的 --shiki-token- 变量（@deepseek-ai/dsh-client-ui-theme 里的 shiki.css）。明暗配色通过 body[data-ds-dark-theme] 自动切换，插件无需检测当前主题。

token 由内置的小型词法分析器分类——不用 shiki，不用客户端原语（DSH 文档禁止插件以模块方式导入它们）。支持：

| 围栏语言 | 着色内容 |
| python、py | 关键字、True/False/None、字符串（含三引号）、# 注释、数字 |
| js、ts、jsx、tsx、javascript、typescript | 关键字、true/false/null、字符串、// 和 / /、数字 |
| json、jsonc | 字符串键、true/false/null、数字 |
| bash、sh、shell、zsh | 关键字、字符串、# 注释、数字 |
| go、golang | 关键字、true/false/nil/iota、字符串、// 和 / / |
| rust、rs | 关键字、None/Some/Ok/Err、字符串、注释 |
| java | 修饰符和类型、true/false/null、字符串、注释 |
| html、xml、svg、htm | 标签、属性、字符串值、 |
| sql（及各方言）、css、scss | 在语言允许的范围内，高亮关键字、字符串、注释 |

单色模式。 围栏 text 、其他语言同样只渲染、不高亮——诚实的等宽文本胜过错误的颜色。

调色板

每种 token 类型都从主题变量取色，因此浅色和深色调色板会自动切换：

| token 类型 | 主题变量 | 归入此类的元素 |
| keyword | --shiki-token-keyword | def、func、fn、public、if、return |
| string | --shiki-token-string | 所有受支持语言中的字符串 |
| comment | --shiki-token-comment | #、//、/ /、 |
| constant | --shiki-token-constant | 数字、true/null/nil/None、全大写常量名（MAX_SIZE） |
| function | --shiki-token-function | 函数调用（print、Println、main）、HTML 属性 |
| type | --shiki-token-parameter | 内置类型（int、String、Vec）、CSS 属性 |
| punctuation | --shiki-token-punctuation | 括号、运算符、逗号 |

内置类型和 CSS 属性单独占一种 token 类型：在 Go、Rust、Python 和 JavaScript 里，它们不是关键字，而是预声明名称，代码词法分析器会漏掉。这些名单放在 GO_TYPES、RUST_TYPES、PYTHON_TYPES、JAVASCRIPT_TYPES、JAVA_TYPES、SQL_TYPES 里。

复制按钮

代码块标题栏右侧带 Copy：剪贴板拿到的是原始代码，不带标记，也不带高亮。1.5 秒后标签恢复原样。浏览器不授予 navigator.clipboard 时，按钮根本不渲染——宁可没有，也不要一个坏掉的按钮。

DSH 扩展点

插件走的是文档里写明的机制（见 ui-chat 包的 docs，「Sent user text」一节）：

- ctx.uiConversation.userText.register({ id, order, match(text, from) }) ——同步匹配器，返回候选 { id, start, end, data }；
- conversation.user.text.node 插槽 —— 节点渲染器，其 key 与 id 对应。

宿主侧是空的：lib/index.js 只导出 apply() {}。它存在，只是为了让这一行出现在配置档的 cordis 树里。

安装

插件装进 DSH 配置档（desktop 或 web）。已在 DSH Desktop 0.2.1-rc.3 上测试。

从 npm 安装

bash
dsh plugin --profile desktop add dsh-user-code-block

推荐走这条路：插件管理器装好包，记进配置档的 package.json 和 dsh.profile.bundles，下次启动 DSH 时插件自动加载。

从源码安装

bash
git clone https://github.com/VictorKozachek/dsh-user-code-block.git
cd dsh-user-code-block
./install.sh # default profile: ~/.dsh/profiles/desktop

脚本会备份配置档清单，把包加进 dependencies（link:）和 dsh.profile.bundles，再创建 node_modules 软链接。要换另一个配置档，用变量指定：

DSH_PROFILE_DIR="$HOME/.dsh/profiles/web" ./install.sh

手动安装

1. 把包加进 ~/.dsh/profiles/desktop/package.json：

{
"dependencies": {
"dsh-user-code-block": "link:/path/to/dsh-user-code-block"
},
"dsh": {
"profile": {
"bundles": [
"@deepseek-ai/dsh-base",
"@deepseek-ai/dsh-web-app",
"dsh-user-code-block"
]
}
}
}

2. 在配置档的 node_modules 里创建软链接：

ln -s /path/to/dsh-user-code-block \
~/.dsh/profiles/desktop/node_modules/dsh-user-code-block

3. 重启应用：客户端模块图在宿主启动时构建，刷新页面不会重新读取。

用命令行从本地路径安装

插件管理器也可以安装本地检出，而不是 npm 包：

dsh plugin --profile desktop add /path/to/dsh-user-code-block

验证

发一条带围栏代码块的消息——代码块应带边框和语言横幅渲染，消息其余部分保持纯文本。

开发

没有依赖，没有构建步骤：改 lib/client.js，跑测试。

node --test test/.test.mjs

- test/matcher.test.mjs —— 围栏解析和词法分析器：它装一个假的 window.__ModuleLoader__，捕获浏览器工厂函数，再用 React 桩调用它，所以测试在 Node 里跑，不需要浏览器。
- test/plugin.test.mjs —— 包接线：清单、补丁层，以及浏览器模块 id 与包名是否匹配。

CI 跑在 GitHub Actions 上，Ubuntu 和 macOS 的 Node 20/22/24（.github/workflows/tests.yml）。

卸载

./uninstall.sh

或者手动：从 dsh.profile.bundles 里删掉 dsh-user-code-block，从配置档的 node_modules 里移除软链接，然后重启应用。

许可证

MIT —— 见 LICENSE。