用途:把 Markstream 流式 Markdown 渲染器集成进已有应用,用于 AI 聊天或文档界面,也用于修复安装、缺失样式或 SSR 失败,以及从其他 Markdown 渲染器迁移。
主要能力与选型:先查看 references/scenarios.md 再选包。按框架只装一个包:markstream-vue、markstream-react、markstream-svelte、markstream-angular、markstream-vue2。可选依赖仅在所需 UI 用到时才装,不预先全装。不要因为仓库名为 markstream-vue 就默认 Vue 包正确。
使用方式:安装前检查 package.json 的框架与版本、锁文件、是否 SSR、样式方案,以及代码高亮、Monaco、Mermaid、D2、KaTeX 等可选功能。样式需在应用 reset 之后显式导入包 CSS,例如 @import 'markstream-vue/index.css' layer(components);,启用数学时另加 @import 'katex/dist/katex.min.css';;Webpack 4 的 Vue 2 项目需直接导入 markstream-vue2/dist/index.css。
渲染器:静态文档和多数流式聊天优先用 content。Vue 3 聊天可用 mode="chat"、:content、:final="false"、smooth-streaming="auto"、:fade="false"、typewriter;完成的历史消息改用 :final="true"、:smooth-streaming="false"、:fade="true"、:typewriter="false"。仅当已有 worker、AST 存储或自定义转换负责解析时,才用 nodes 加 final。
限制与边界:Nuxt 的浏览器端可选依赖需放在 client 边界后;Next.js 实时流用根 markstream-react 并在 'use client' 内,SSR 用 markstream-react/next,纯服务端用 markstream-react/server;markstream-svelte 仅支持 Svelte 5;需确认 Angular 版本要求;Vue 3 中 chat/docs/minimal 对应不同场景。HTML 策略默认 safe、Mermaid 默认 strict,不应放宽,除非用户指明可信的旧场景并限定范围。最后运行最小构建、类型检查或测试,确认包匹配、仅加所需依赖、样式顺序正确、SSR 不在服务端执行浏览器依赖,并报告所选包、依赖、CSS 位置、流式输入选择与验证命令。