Simon-He95/markstream-vue

Multi-framework streaming Markdown renderers for AI apps: Vue/Nuxt, React/Next.js, Svelte, and Angular, with Mermaid, KaTeX, Shiki, Monaco, safe HTML, and low-jitter updates.

它解決了什麼問題

許多標準的 Markdown 渲染器是為靜態文件設計的，當渲染快速變化的內容（例如聊天介面中的 AI 產生的 token 串流）時，會產生視覺閃爍或效能問題。markstream-vue 提供一種穩定、無閃爍的方式來渲染仍在從 LLM 串流的 Markdown。

它如何運作

它作為 Vue 3 的專屬渲染器（同時有 React、Svelte、Angular 的兄弟套件）來處理不完整的 Markdown 狀態。提供兩種主要渲染模式：長文件的虛擬視窗以及「打字」效果的增量批次。它可以處理原始 Markdown 字串或預先解析的節點，並支援對 Mermaid 圖表、KaTeX 數學等大型元素的漸進式渲染。

適用對象

開發 AI 聊天 UI、使用 SSE（Server‑Sent Events）或 WebSocket 串流介面的開發者，以及使用 Vue、Nuxt 或 VitePress 建置文件站點的開發者。

重點特色

  • AI 優化串流：專為降低 LLM token 串流時的閃爍並維持可預測的記憶體使用而設計。
  • 多框架支援：雖然此倉庫針對 Vue，但屬於支援 React、Svelte 與 Angular 系列渲染器的一部份。
  • 漸進式渲染：支援串流程式碼區塊（透過 Monaco/Shiki）與圖表（透過 Mermaid），內容增長時即時更新。
  • 豐富整合：內建 KaTeX 數學與自訂標籤（例如 thinking 區塊）的支援。
  • 彈性模式：包含 chat 模式以提供平穩節奏，及 docs 模式以呈現豐富文件版面。