markstream-vue:用于 AI 聊天和 LLM Token 流的无闪烁流式 Markdown 渲染器

markstream-vue:用于 AI 聊天和 LLM Token 流的无闪烁流式 Markdown 渲染器

它解决了什么问题

典型的 Markdown 渲染器是为完整文档设计的,在渲染仍在生成的文本(例如通过 SSE 或 WebSocket 的 AI 聊天回复)时会出现闪烁和性能问题。Markstream 提供了一种稳定、无闪烁的方式,实时渲染不完整的 Markdown 状态。

工作原理

Markstream 使用专为流式内容设计的渲染引擎。它提供两种主要模式:用于长文档的虚拟窗口和用于“打字”效果的增量批处理。它可以处理原始 Markdown 字符串或预解析的节点,并支持对 Mermaid 图表和代码块(通过 Monaco/Shiki)等重量级元素进行渐进式渲染。

适用人群

构建 AI 聊天界面、LLM 驱动的应用,或任何需要使用 Vue 3、Nuxt、React、Svelte 5 或 Angular 实现流式文本输出的 UI 的开发者。

亮点

  • 流式优先设计:专为在 AI Token 流期间最小化闪烁并保持可预测的内存使用而构建。
  • 多框架支持:提供 Vue、React、Svelte 和 Angular 的专用包。
  • 渐进式渲染:支持流式代码块和图表(Mermaid),随内容增长实时更新。
  • 丰富集成:可选支持 KaTeX(数学公式)、Monaco(代码编辑器)和 Shiki(语法高亮)。
  • 灵活模式:包含 chat 模式用于平稳节奏,docs 模式用于更丰富的布局。

Sources