前言¶

在 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