在 AI 聊天界面里，Markdown 不是一次性得到的。模型会通过 SSE 或 WebSocket 持续返回 token，前端必须在内容还没结束时就开始渲染：标题可能只有半个字符，代码围栏可能还没有闭合，Mermaid 和数学公式也可能仍在生成。
这和渲染一篇已经完成的 Markdown 文档，是两个不同的问题。
传统 Markdown 渲染器遇到的几个问题
marked、markdown-it、react-markdown 等方案非常适合完整文档。把它们直接用于 token 流时，常见问题包括：
- 不完整的代码围栏导致代码块在普通文本和代码之间反复跳动；
- 表格、列表、链接等结构在每次更新时重新解释，页面出现抖动；
- Mermaid、KaTeX 等重量级内容在尚未完成时就尝试渲染；
- 长回答不断追加时，整棵渲染树反复更新，滚动位置也更难稳定。
Markstream 解决的是什么
Markstream 是专门面向 AI 对话流的 Markdown renderer family。Vue 3 项目可以直接安装：
bash
pnpm add markstream-vue最小使用方式：
vue
<script setup lang="ts">
import { ref } from 'vue'
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
const content = ref('')
const isDone = ref(false)
// 在真实项目中，这里可以替换成 SSE / WebSocket 的 token 回调
function onToken(token: string) {
content.value += token
}
</script>
<template>
<MarkdownRender mode="chat" :content="content" :final="isDone" />
</template>它的重点不是替代所有 Markdown 工具，而是让"仍在变化的 Markdown"保持可读：
- token 逐步到达时保持稳定的增量更新；
- 支持 Mermaid、KaTeX 和语法高亮代码块；
- 支持安全 HTML、SSR，以及较长的 AI 回答；
- Vue、React、Svelte、Angular 和 Vue 2 有对应 sibling packages；
- MIT License，可以直接集成到自己的 AI 聊天产品中。
什么时候不应该使用它
如果你的内容是已经完成的博客、文档或静态 Markdown 页面，marked、markdown-it、react-markdown 等成熟方案通常更简单。Markstream 适合的是模型仍在输出、用户已经开始阅读的那几秒钟。
如何选择
React 团队如果需要 react-markdown 风格的 drop-in API 和成熟插件生态，可以优先考虑 Streamdown 或其他成熟方案。Markstream 更适合需要跨 Vue / React / Svelte / Angular 保持相近流式行为，或者需要对重型块和长回答进行渲染控制的场景。
GitHub：github.com/Simon-He95/...
Streamdown 对比：markstream.simonhe.me/compare/str...
Vue 快速开始：markstream.simonhe.me/frameworks/...
如果你正在做 AI 聊天、Copilot、知识库问答或任何 token 流式 UI，欢迎用一个真实的 SSE 响应试试，再根据实际体验决定是否采用。