Markdown 实时预览thomasly/dsh-markdown-preview

dsh-markdown-preview

DeepSeek Harness 聊天输入框的 Markdown / 公式实时预览插件

在 输入框上方实时渲染你正在输入的 Markdown：加粗 当场变粗，$x+y$ / $$x+y$$ 当场变公式。
输入框本身完全不动——预览面板吸附在输入卡片上沿，输入框不会因渲染而移位。

✨ 功能一览

- 📝 Markdown 实时预览：加粗 / 斜体 / 行内代码 / 代码块 / 删除线 / 引用 / 链接 / 有序无序列表 / 标题 / 表格 / 分隔线，边打边渲染
- 🧮 KaTeX 公式：$x+y$ 行内公式、$$\n…\n$$ 块级公式实时渲染（KaTeX 渲染器构建时内联进插件，无外部运行时依赖）
- 📍 预览在输入框上方：面板吸附在输入卡片上沿，随草稿出现/消失——输入框位置永远不动
- 🎛️ 一键收起/展开：标题栏右侧箭头按钮切换预览显示（展开时 ▾、收起时 ▸），默认展开，选择会记住（localStorage 持久化），收起后保留一条细栏可随时再展开
- 🔌 零核心补丁：纯插件实现，注册官方 conversation.input.dock 槽位，不修改、不复制任何 DSH 核心代码，与输入框原有全部功能（/ @ 触发、附件、plan 模式、队列 dock 等）天然兼容
- 🛡️ 安全：草稿中的原始 HTML 一律转义，只渲染 Markdown 结构，粘贴恶意标签不会执行
- ⚡ 轻量：草稿为空时不渲染（无布局跳动）；预览区限高 240px 自动滚动，长文档不挤压聊天区

📸 截图

| Markdown 基础格式 | 行内 + 块级公式 |
|---|---|
|  |  |

| 代码块与表格 | 收起态（点击 ▾ 恢复展开） |
|---|---|
|  |  |

📦 安装

方式一：dsh 插件命令（推荐，发布渠道）

dsh plugin --profile web add github:thomasly/dsh-markdown-preview

安装后重启 dsh web 生效。

方式二：本地手动挂载

1. 克隆到 profile 的插件目录
mkdir -p ~/.dsh/profiles/web/plugins
git clone https://github.com/thomasly/dsh-markdown-preview.git ~/.dsh/profiles/web/plugins/dsh-markdown-preview

2. 链接进 profile 依赖
cd ~/.dsh/profiles/web
pnpm add --save-exact file:./plugins/dsh-markdown-preview

3. 在 ~/.dsh/profiles/web/cordis.patch.yml 中追加注册条目
- insert:
- id: markdown-preview
name: dsh-markdown-preview

4. 重启生效
dsh web

⚠️ 两种方式只能选其一，切勿混用：方式一会把插件加入 dsh.profile.bundles，由插件自带的 dsh.bundle.patch 经 bundle 渠道注册；方式二则是手动 insert。若同时存在，会出现 duplicate loader entry id: markdown-preview 的启动报错——切换方式前请先清理另一条注册。

🖥️ 使用

打开任意会话，直接在输入框输入 Markdown 即可：

- 这是 加粗 的文字 → 预览面板中"加粗"立即变为粗体
- 行内公式 $x+y$ → 立即渲染为数学符号
- 块级公式换行书写 $$ … $$ → 居中渲染
- 清空输入框 → 预览面板自动消失，输入框位置始终不动
预览只是“所见即所得”的辅助显示：发送的内容始终是原始 Markdown 文本，消息气泡由 DSH 自带渲染器渲染，二者互不影响。

🧹 卸载

dsh plugin --profile web remove dsh-markdown-preview   # 或：pnpm remove dsh-markdown-preview
同时删除 cordis.patch.yml 中的 insert 条目，重启 dsh web

🔨 从源码构建

npm install        # 安装构建依赖（esbuild / marked / katex / marked-katex-extension）
node build.mjs     # 产出 lib/client.js（marked+KaTeX 内联，仅 react 走模块加载器）

🧠 工作原理

cordis.patch.yml 注册插件 entry
→ 宿主扫描 dsh.client 声明（platform: web）
→ 浏览器加载 /plugins/dsh-markdown-preview/client.js
→ 客户端 Cordis runner 应用插件（ctx.slots）
→ 注册官方 conversation.input.dock 槽位条目（输入栏上方停靠区）
→ 槽位 owner props 随每次击键下发实时 input.draft
→ marked + marked-katex-extension + KaTeX 渲染
→ 预览面板吸附在输入卡片上沿；草稿为空时渲染 null（零布局跳动）

关键点：

- 不碰 DOM、不碰 InputBar：草稿文本来自官方槽位的 owner props（input.draft），每个击键随 React 重渲染自动更新；
- 零核心补丁：区别于“修改 core 文件 + 同步脚本”的补丁路线，本插件升级 DSH 后依然生效，无需任何维护脚本；
- 持久化：插件本体安装在 profile 目录，清 npm 缓存、升级 dsh 都不影响它。

📄 许可证

MIT