Simon-He95/markstream-vue

解決的問題

標準的 Markdown 渲染器是為靜態文件設計的。當用於 AI 聊天介面，文字以逐 token 流式傳輸時，文件會從頭開始重新解析與重新渲染，導致視覺閃爍、記憶體急升與版面位移。markstream-vue 提供一個穩定、高效率的渲染器，專為這些串流狀態優化，確保在不犧牲複雜格式的前提下，實現平滑的「打字」效果。

工作原理

本專案為 Vue 3（以及其他框架透過附屬套件）提供專用渲染器，可處理不完整的 Markdown 語法。它採用兩種主要渲染模式：長文件使用虛擬視窗，聊天式串流使用增量批次處理。它與 stream-markdown-parser 整合，處理部分 Markdown 狀態的邏輯，並支援 Mermaid 圖表、KaTeX 數學公式，以及透過 stream-diffs 併用套件實現的串流程式碼區塊等重載區塊的漸進式渲染。

適用對象

開發 AI 聊天 UI、LLM 驅動應用程式，或任何需要消費 Server-Sent Events (SSE) 或 WebSocket 串流 Markdown 文字的介面的開發者，需要專業、無閃爍的使用者體驗。

主要亮點

• 串流優先設計：專為最小化 AI 令牌串流中的閃爍並維持可預測的記憶體使用而建構。
• 多框架支援：雖然此套件專為 Vue 3/Nuxt/VitePress 設計，但 Markstream 家族亦包含 React、Svelte、Angular 和 Vue 2 的適配器。
• 豐富媒體支援：支援 Mermaid 圖表、KaTeX 數學公式與 D2 資訊圖的漸進式渲染。
• 進階程式碼區塊：與 stream-diffs 整合，強化程式碼與差異區塊的渲染，實時更新。
• 彈性渲染模式：提供 chat 模式以維持穩定節奏，以及 docs 模式以實現豐富的文件版面。