Pro tip
Streaming callouts render mid-stream.
`::: tip` 等容器语法（info/note/warning/danger/caution/error）渲染为带图标和标题的提示框。
组件画廊
下方每张卡片都是 markstream-vue 的真实渲染结果 — 你看到的就是用户得到的。按分类过滤、按名称或关键词搜索，点击卡片进入组件页面，里面有可复制的 Markdown、覆盖方法和相关组件。
Markdown keeps prose honest, even while it streams.
`>` 引用行渲染为承载嵌套块/行内内容的 `<blockquote>`。
Parse incomplete markdown
Render the Mermaid diagram
GFM 任务列表 `- [x]` / `- [ ]` 渲染为列表项内的 SVG 勾选图标。
DefinitionListNode
opt-in
Markdown
: A text format that streams well.PHP-Extra 风格 `术语` + `: 定义`（需消费方注册 deflist 插件）渲染为定义列表结构。
Backlinks matter[1].
The anchor arrow jumps back to the reference. ↩︎
脚注定义内的回链箭头，点击跳回正文对应的 `[^n]` 引用处。
Backlinks matter[1].
The anchor arrow jumps back to the reference. ↩︎
`[^1]: 说明` 脚注定义渲染为文档末尾带锚点的脚注块。
Backlinks matter[1].
The anchor arrow jumps back to the reference. ↩︎
行内 `[^1]` 脚注标记渲染为可点击的 `<sup>`，跳转到脚注定义。
First line
Second line
行尾反斜杠（或两个尾随空格）渲染为硬换行 `<br>`。
Streaming headings stay stable
`#` 到 `######` 的 ATX 标题渲染为 `<h1>`-`<h6>`。
First item with bold
Second item
每个列表项渲染为流式追加期间布局稳定的 `<li>`。
Incremental parsing
Stable DOM reuse
`-`/`*` 无序列表与 `1.` 有序列表渲染为 `<ul>`/`<ol>`（支持起始序号）。
A paragraph hosts inline nodes and code spans.
文本段落渲染为承载行内子节点的 `<p dir="auto">`。
Grounded answers cite sources 42.
行内 `[42]` 数字标记渲染为可点击、抛出 click 事件的引用徽标。
| Feature | Status |
|---|---|
| Streaming | stable |
| Mermaid | lazy |
GFM 管道表格渲染为带列对齐、防溢出滚动的表格容器。
Intro paragraph
Closing paragraph
单独成行的 `---` / `***` / `___` 渲染为 `<hr>` 分隔线。
CodeBlockNode
stream-diffs
TypeScript
围栏 ```lang 代码块渲染为 stream-diffs 驱动的代码面板（头部、复制按钮、diff 模式）。
Install with pnpm add markstream-vue.
反引号 `代码` 行内代码渲染为 `<code>` 样式片段。
PreCodeNode
opt-in
Plain Text
由 render-code-blocks-as-pre 属性启用的纯 `<pre><code>` 渲染，也是代码/图块的兜底渲染面。
D2BlockNode
@terrastruct/d2
```d2 代码块经 D2 运行时编译为支持渐进渲染的 SVG 图。
InfographicBlockNode
opt-in@antv/infographic
```infographic 代码块在配置 setInfographicLoader 后渲染 AntV 信息图。
MathBlockNode
katex
`$$...$$`（或 `\[...\]`）块级公式渲染为 KaTeX HTML。
MathInlineNode
katex
行内 `$...$`（或 `\(...\)`）公式渲染为 KaTeX 行内 HTML。
MermaidBlockNode
mermaid
```mermaid 代码块渲染为支持流式预览、缩放和导出的交互式 SVG 图。
Why streaming?
Partial input stays renderable.
块级 HTML（如 `<div>`、`<details>`）渲染为净化且流式稳定的 DOM。
Press Ctrl plus K.
行内 HTML 标签（如 `<u>`、`<kbd>`、`<mark>`）渲染为净化的行内元素。
`` 图片渲染为带加载态与视口延迟请求的 `<img>`。
`[文本](url)` 渲染为带下划线动画与可选悬停提示的 `<a>`。
Custom containers wrap any block.
`:::名称` 自定义容器（admonition 之外的名称）渲染为 `vmr-container-{name}` 包装块。
EmojiNode
opt-in
Shipped! 🎉
`:tada:` 短代码（需消费方注册 markdown-it-emoji 插件）渲染为原生 emoji 字符。
Streams render emphasis instantly.
`*文本*` 或 `_文本_` 渲染为 `<em>` 斜体。
This is the key phrase.
`==文本==` 渲染为 `<mark>` 高亮。
v2 adds insert markup for additions.
`++文本++` 渲染为下划线样式的 `<ins>` 插入标记。
Streaming Progressive rendering.
GFM `~~文本~~` 渲染为 `<del>` 删除线。
Strong claims need evidence.
`**文本**` 或 `__文本__` 渲染为 `<strong>` 粗体。
Water is H2O.
`~文本~` 渲染为 `<sub>` 下标，并对中日韩数字范围的波浪号做防误判。
The area grows as x2.
`^文本^` 渲染为 `<sup>` 上标。
Plain text runs are the leaves of every inline tree.
纯文本渲染为 `<span>`，是所有行内树的叶子节点。
面向长混合会话（纯文本 + Markdown 行）的虚拟化时间轴组件，支持吸底滚动与恢复状态。
内部基础构件：按显式组件映射渲染单个 AST 节点，供内置组件实现嵌套与自定义节点渲染（不从包入口导出，无法直接 import）。
MarkdownRender 背后的核心渲染器：把 AST 节点映射为组件，支持流式复用、批量调度与可选虚拟化。
内部快速渲染路径：渲染简单行内节点数组（文本、强调、链接等）而无需挂载完整块渲染器，供内置组件使用。
LinkNode 与图块组件共用的浮动提示组件，也作为异步组件导出。
如何使用一个组件
- 在组件页面复制 Markdown 输入。
- 用
MarkdownRender渲染：
vue
<script setup>
import { MarkdownRender } from 'markstream-vue'
import 'markstream-vue/index.css'
</script>
<template>
<MarkdownRender :content="markdown" />
</template>默认就是流式
这些预览在内容逐 token 流入时渲染结果完全一致。未闭合语法保持稳定而不是闪烁 — 这是 Markstream 的核心能力。