dsh-markstream: 基于 markstream-react 的低抖动流式 Markdown 渲染器

前言

DeepSeek Harness (DSH) 的核心设计理念是“一切皆插件”。在构建 AI 聊天界面时,流式渲染(Streaming)的体验至关重要。默认的 Markdown 渲染器通常存在抖动(Jitter)问题,且对代码高亮、图表等复杂内容的支持有限。

dsh-markstream 是一款 DSH Web 插件,它通过 markstream-react 替换了默认的 assistant-step 渲染器,提供了低抖动的增量流式渲染能力,支持代码块差异对比、Mermaid 图表、KaTeX 公式渲染以及安全 HTML。

插件概览

  • 功能定位:DSH Web 插件,用于渲染助手消息流。
  • 维护者:boomboomxx。
  • 许可证:MIT。
  • 技术栈:基于 markstream-react,与 DSH 客户端运行时集成。

核心功能

  1. 渲染器替换
    插件在 conversation.chat.node 的 keyed slot 中注册,优先级设为 -10,从而覆盖默认优先级为 0 的系统内置渲染器。这确保了自定义渲染逻辑在 UI 中优先执行。

  2. 流式渲染特性

    • 文本块:通过 <MarkdownRender content final fade> 渲染,包含低抖动增量流式输出及不完整 Markdown 的中间状态。
    • 代码块:支持流式差异显示(需 stream-diffs 包)。
    • 图表与公式:支持 Mermaid 图表渲染(需 mermaid 包)和 KaTeX 公式渲染(依赖树内联)。
    • 安全 HTML:提供安全的 HTML 渲染支持。
  3. UI 保留
    渲染器保留了系统原有的特定 UI 结构:

    • 推理块保留“思考”展开行。
    • 图片组保留附件画廊。
    • 未知块保留 JSON 回退。
    • 中断消息保留“已停止”标记。
    • 底部节点(turn-tail,包含图标操作/文件生成行)和工具行渲染保持不变。

配置方式

该插件不再通过“设置 -> 插件 -> 配置”卡片进入,唯一的配置入口是界面右下角的浮动齿轮按钮。

  1. 入口与面板
    点击右下角的浮动齿轮(shell.overlay 条目 dsh-markstream-config)打开非模态浮动面板。面板高度约为对话窗口的 70%,垂直居中,不阻塞页面其他操作。

  2. 配置项
    配置项会覆盖并持久化到 $DSH_HOME/settings.yaml。修改后通过 revision-fenced 设置域立即生效,渲染器会自动重新安装。

基础设置

字段 默认值 说明
enabled true 开关:设为 false 时恢复系统默认渲染器。
theme auto 主题:auto(跟随 DSH 主题)、light、dark。
fade true 文本淡入动画。
typewriter false 流式内容时的光标闪烁效果。

代码块设置

字段 默认值 说明
codeBlockShowHeader true 显示代码块头部。
codeBlockShowTooltips true 显示提示信息。
codeBlockShowFontSizeButtons true 显示字体大小按钮。
codeBlockShowCollapseButton false 显示折叠按钮。
codeBlockDiffStyle unified 差异显示风格:unified 或 split。
codeBlockOverflow wrap 溢出处理:wrap 或 scroll。
codeBlockExpandUnchanged false 折叠未变化的差异区域。
codeBlockEnableLineSelection true 启用行选择。
codeBlockDisableLineNumbers false 隐藏行号。
codeBlockFontSize 13 字体大小 (px)。
codeBlockTabSize 2 Tab 缩进宽度。
codeBlockPadding 12 代码块内边距 (px)。
codeBlockMaxHeight 480 最大高度 (px),0 为无限制。
codeBlockLightTheme vitesse-light 亮色代码主题。
codeBlockDarkTheme vitesse-dark 暗色代码主题。

图表设置

字段 默认值 说明
mermaidEnabled false 启用 Mermaid 渲染(需安装 mermaid 包)。
mermaidIsStrict true 严格模式。
mermaidMaxHeight 480 最大高度 (px)。
d2Enabled false 启用 D2 渲染(需安装 @terrastruct/d2 包)。
d2MaxHeight 480 最大高度 (px)。

注意事项

  1. 依赖要求:高级功能(如流式代码差异、Mermaid、D2)需要安装对应的可选依赖包,否则将回退到基础渲染模式(如纯 <pre> 标签或源码显示)。
  2. 配置入口变更:由于 dsh-markstream 模型化了一个浮动的配置面板,DSH 界面中的“设置 -> 插件 -> 配置”列表中不再显示 Markstream 卡片。
  3. 复用字典:渲染器复用了 ui-conversation 命名空间中的字典(如 row.running、message.stopped 等),无需额外注册语言包。

结语

dsh-markstream 通过 markstream-react 解决了 DSH 聊天界面中流式渲染抖动和功能单一的问题。它通过右下角的浮动面板提供了精细的控制,支持代码差异、图表渲染和自定义主题,适合需要高质量聊天 UI 展示的开发者。

  • GitHub: https://github.com/boomboomxx/dsh-markstream
  • 目录页: https://www.skillhub.cn/plugins/boomboomxx/dsh-markstream
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜