前言¶

在 DeepSeek Harness（DSH）里，助手输出的 SVG 往往以 Markdown 代码围栏的形式出现：几十行 XML 占满屏，要脑补图形或另开工具预览。社区插件 dsh-svg-fences 在客户端把「可解析的 SVG 文档」渲染成行内插图，并保留一键切回源码、复制与下载；颜色可跟随 DSH 明/暗主题切换。下面介绍它解决什么问题、如何安装，以及写 SVG 时如何用主题变量。

这是什么¶

dsh-svg-fences 由维护者 chandra447 发布，归类为 客户端 插件。一句话定位：在 DSH 聊天里，把内容为 SVG 的代码围栏渲染为主题感知的行内图形（theme-aware inline figures），而不是只显示代码。

包体约 22 KB 浏览器 JS，随包提供预构建的 client.js，安装时不跑构建脚本，因此不会触发 DSH 的 allowBuilds 审批；无 host 代码、无 npm 依赖。许可证为 MIT（见仓库 README）。npm 包当前版本为 0.1.0（以 package.json 为准）。

核心功能¶

安装并在对应 profile 启用后，对符合条件的代码块会发生这些事（均来自官方 README）：

• 原位插图：显示图形时隐藏原代码块；图形就出现在原来围栏的位置。
• 小工具条：svg 标签，以及 Source、Copy、Download。
• Source / Render：Source 切回代码；同一按钮在代码视图下标为 Render，可再切回图。
• Copy：把原始围栏全文（含 token）复制到剪贴板。
• Download：保存 .svg；文件名优先取 <title>，否则为 figure.svg。
• 缩放：点图可放大，支持 +、−、重置；Esc 或点背景关闭。
• 主题感知：颜色跟随 DSH 明/暗主题，缩放视图打开时切换主题也会更新。
• 按内容识别：围栏语言标签不重要；只要内容是 SVG 文档就会尝试渲染。
• 工具条文案：随 DSH 语言显示英文或中文。

识别与跳过规则（简要）：

• 仅处理 div.md-code-block 内 <pre> 文本；修剪后以轻量 < 开头，且 DOMParser 能按 image/svg+xml 解析出根 <svg>、无 parsererror。
• 不处理带行号的代码块；不处理无法解析的 SVG（仍显示普通代码块）；跳过超过 60 KB 的源文本。
• 与 Mermaid 等插件可并存：Mermaid 源码不以 <svg 开头，本插件不碰那些块。

安全与能力边界（有意不做的事）：

• 图形通过 <img src="data:image/svg+xml,..."> 展示，不执行 SVG 内脚本，链接不可点，外部图/字体不加载。
• 不访问网络；不修改消息持久内容——禁用插件后代码块恢复。
• 不渲染 Mermaid、PlantUML、Graphviz 等；只处理 SVG。

安装与启用¶

插件以当前 DSH 进程的客户端权限运行。安装前建议在 GitHub 仓库 查看源码与 MIT 许可证，确认符合你的环境策略。社区目录页：https://www.skillhub.cn/plugins/chandra447/dsh-svg-fences（独立站点，非 DeepSeek / 幻方官方应用商店）。

在应用内：打开 Plugins → Discover，搜索 dsh-svg-fences 并安装。

在终端（按你实际使用的 profile 二选一或都装）：

dsh plugin --profile web add dsh-svg-fences
dsh plugin --profile desktop add dsh-svg-fences

卸载时将 add 改为 remove。

官方说明在 DeepSeek Harness 0.2.x、macOS 上测试；包声明需要 Node ≥ 22.19.0（安装/metadata），实际跑的是浏览器端 JS，其他平台未注明测试。

典型用法：主题变量与示例围栏¶

模型默认不知道 DSH 主题 token 别名。可在提示或项目说明里写明，例如：

When you draw SVG, use var(--fg), var(--muted), var(--accent), var(--surface) and var(--border) for colors.

插件在绘制前把围栏里的 CSS 变量换成当前主题计算值；主题变化时会重新编码。常用映射如下：

补充规则：var(--name, #888) 在 token 缺失时用回退色；currentColor 跟主题文字色；默认字体为 sans-serif（除非根 <svg> 已设 font-family）。Download 会把当前主题色烘焙进文件；Copy 仍保留 var(--...) 原文。

README 中的可复现示例（明/暗主题下图形一致，下载名为 hello-figure.svg）：

```svg
<svg viewBox="0 0 260 80" xmlns="http://www.w3.org/2000/svg">
  <title>hello-figure</title>
  <rect x="1" y="1" width="258" height="78" rx="10" fill="var(--surface)" stroke="var(--border)"/>
  <circle cx="40" cy="40" r="14" fill="var(--accent)"/>
  <text x="68" y="45" font-size="15" fill="var(--fg)">Rendered, not printed</text>
</svg>
```

实现要点（便于排错）¶

了解机制有助于判断「为什么这块没变成图」：

1. MutationObserver 监听页面；变更后约 250 ms 内扫描各 div.md-code-block。
2. 主题 token 通过代码块容器上的 getComputedStyle 读取（DSH 把变量作用在容器而非 :root）。
3. 解析成功后，在块后插入 <img>，用 CSS 与 data 属性隐藏原块；图片加载失败则恢复代码块。
4. 另有一个 observer 监听 <html> / <body> 上与 data-ds-dark-theme 相关的属性，调色板变化时重编码所有图。

适用场景与注意¶

适合：日常在 DSH 里让助手画示意图、小 UI mock、简单矢量图，希望在对话流里直接看图，并要能切源码、复制给别处、或下载 SVG 文件。

注意：

• 需要可交互 SVG（脚本、外链、可点链接）时，本插件不满足；它是安全的静态预览。
• 超大或语法错误的 SVG 会保持代码块展示，便于排查。
• DSH 生态强调「一切皆插件」；本插件与同作者的 dsh-table-charts 同属「预构建 client.js、无依赖、无服务端」一类客户端扩展。

思路借鉴自 oh-my-pi 中的图形管线，本仓库为 DSH 浏览器端独立实现，不含 oh-my-pi 代码。

结尾¶

先做 profile 对应的 dsh plugin ... add，再在对话里让模型输出带主题变量的 SVG 围栏，即可在聊天里看图而非一长段 XML；需要改稿时点 Source，需要保留 token 用 Copy，需要固化当前配色用 Download。

• 目录页：https://www.skillhub.cn/plugins/chandra447/dsh-svg-fences
• 源码与文档：https://github.com/chandra447/dsh-svg-fences