dsh-md-viewer:侧边栏 Markdown 富渲染预览

前言

在 DSH(DeepSeek Harness)开发流程中,开发者经常需要在侧边栏查看 Markdown 文档(如提示词模板、配置说明、开发日志)。默认情况下,侧边栏仅显示纯文本,阅读体验较差,且频繁切换编辑/预览模式影响效率。dsh-md-viewer 插件通过接管文件打开行为,直接在 dsh-better-sidebar 中提供富渲染预览。

插件简介

dsh-md-viewer 是一个客户端 Web 插件,由 2017java 维护。它通过依赖 dsh-better-sidebar 的服务,将 .md 文件以富渲染视图展示,支持代码高亮、表格、目录导航等功能。

核心功能

  • 完整 Markdown 渲染:支持标题、段落、列表、引用、分隔线、链接、图片、管道表格等基础语法。
  • 代码块增强:支持 js/ts/py/bash/json/yaml/html/css 语言的语法高亮;提供一键复制按钮和语言徽标。
  • 目录与导航:自动生成目录(TOC),点击目录项可平滑滚动至对应位置。
  • HTML 处理与安全:正确解析 <img>、<a>、<br> 等元素,处理 HTML 实体,剥离 HTML 注释。采用纯 React 渲染,不使用 innerHTML,避免 XSS 风险。
  • 对话联动:在对话中点击 DSH 自带的“产出文件” chips,可直接在侧边栏打开并渲染预览。

安装与启用

本插件依赖 dsh-better-sidebar。在安装前请确保已安装该组件。

  1. 安装插件:
dsh plugin --profile web add dsh-md-viewer@latest
  1. 安装完成后,在浏览器中执行硬刷新(Cmd/Ctrl + Shift + R)以加载新模块。

典型用法

  • 文件预览:在 dsh-better-sidebar 中打开任意 .md 或 .markdown 文件,即可看到排版好的富文本预览。
  • 对话联动:在对话流中,当模型输出文件或你点击“产出文件” chips 时,会自动调用该插件在侧边栏渲染预览。

限制与注意事项

  • 依赖要求:必须安装 dsh-better-sidebar。若未安装,本插件不会生效(作为安全 no-op)。
  • 图片路径:Markdown 中的相对路径图片不会自动根据文件目录解析,需在组件中基于 props.path 重写 src。
  • 功能缺失:不支持 GFM 任务列表、LaTeX 数学公式、Mermaid 图表、脚注。如需完整功能,可考虑使用 dsh-md-overlay 独立预览组件。

总结

dsh-md-viewer 为 DSH 用户在侧边栏查看 Markdown 文档提供了简洁、安全且功能丰富的方案。通过标准化的文件查看器注册机制,它无缝融入现有的侧边栏工作流。

插件目录
GitHub 仓库

羽毛球分组比赛记分
小程序二维码

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

小夜