Vue 2 流式 Markdown 渲染器

markstream-vue2 是 Markstream 家族里的 Vue 2.6 / 2.7 渲染器。它适合必须继续运行在 Vue 2 的 AI 聊天、LLM token 流、SSE/WebSocket 输出、未闭合 Markdown 中间态、Mermaid、KaTeX、Shiki 代码块和 Vue 2 组件渲染场景。

如果是 Vue 3、Nuxt 3 或新项目，优先看 markstream-vue。

什么时候使用 markstream-vue2

使用 markstream-vue2 的典型场景：

• 应用必须停留在 Vue 2.6 或 Vue 2.7
• Markdown 来自 LLM、SSE 或 WebSocket 流
• 未闭合代码块、局部数学公式或局部 HTML-like 标签不能闪烁
• 长 AI 回复需要受控的 live rendering
• 流式内容里会出现 Mermaid、KaTeX 和代码块
• 需要在 Markdown 中渲染自定义 Vue 2 节点组件

下面这些情况可以先评估更简单的 Vue Markdown 渲染器：

• 只渲染短的完成态 Markdown
• 只需要 markdown -> HTML
• 项目可以迁移到 Vue 3 并使用 markstream-vue

快速开始

pnpm add markstream-vue2

Vue 2.6 应用还需要：

pnpm add @vue/composition-api

import VueCompositionAPI from '@vue/composition-api'
import { VueRendererMarkdown } from 'markstream-vue2'
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueCompositionAPI)
Vue.use(VueRendererMarkdown)

Vue 2.7 应用不需要 @vue/composition-api，但仍应安装渲染器插件：

import { VueRendererMarkdown } from 'markstream-vue2'
import Vue from 'vue'
import 'markstream-vue2/index.css'

Vue.use(VueRendererMarkdown)

最小 Vue 2 消息组件：

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  props: { content: String, done: Boolean },
}
</script>

<template>
  <MarkdownRender :content="content" :final="done" :fade="false" />
</template>

Vue CLI 4 / Webpack 4 项目应使用真实 CSS 文件路径，因为 Webpack 4 不支持 package.json#exports：

import 'markstream-vue2/dist/index.css'

流式示例

普通聊天流可以持续把 chunk 追加到 content，在结束时把 final 切为 true：

<script>
import MarkdownRender from 'markstream-vue2'

export default {
  components: { MarkdownRender },
  data: () => ({ content: '', final: false }),
}
</script>

<template>
  <MarkdownRender :content="content" :final="final" :fade="false" />
</template>

高频长流建议使用 Vue 2 快速开始 里的 parser / nodes 路径，把解析节奏放在外层控制。

Mermaid、KaTeX 和代码块

只安装你需要的可选 peer：

pnpm add stream-markdown

然后启用 Shiki 代码块：

import { MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue2'

setCustomComponents({ code_block: MarkdownCodeBlockNode })

Mermaid 图表安装 mermaid。KaTeX 数学公式安装 katex，并导入它的样式：

pnpm add mermaid
pnpm add katex

import 'katex/dist/katex.min.css'

默认 Mermaid 和 KaTeX loader 已经启用。只有在手动关闭后重新启用，或需要自定义 loader 时，才调用 enableMermaid() 或 enableKatex()。

与普通 Vue Markdown 渲染器对比

需求	markstream-vue2	普通 Vue Markdown 渲染器
Vue 2.6 / 2.7 支持	支持	取决于包
AI 聊天流式输出	面向累积 content 和可选 nodes 设计	通常按完成态 Markdown 重渲染
未闭合 Markdown	有流式中间态处理	语法未完成时通常不稳定
Mermaid / KaTeX / 代码块	Markstream 集成和可选 peer	依赖插件
新 Vue 3 项目	改用 markstream-vue	使用 Vue 3 生态包

试用与下一步

• Vue 2 playground
• Vue 2 快速开始
• Vue 2 安装
• 框架总览
• npm package