Incremark 0.3.0 发布：双引擎架构 + 完整插件生态，AI 流式渲染的终极方案

距离上次发帖已经过了一段时间，这段时间我一直在打磨 incremark ，今天正式发布 0.3.0 版本。这次更新的核心是双引擎架构——你可以在极速的 marked 和稳定的 micromark 之间自由切换，同时享受完整的插件生态。

先说结论

md 来源：本地随机抽取的 38 个文件，最大只有 18kb ，文件更大的时候，这个差距只会随指数拉大，没有专门写测试 markdown 文件，就拉了文档中的一些 md 以及使用 cursor 时候生成的一些文档。可查看文档看详细数据 详细数据

基于 38 个真实 markdown 文档（ 6,484 行，128.55 KB ）的基准测试结果。

在线体验：

• Vue 演示： https://incremark-vue.vercel.app/
• React 演示： https://incremark-react.vercel.app/
• Svelte 演示： https://incremark-svelte.vercel.app/
• 文档： https://www.incremark.com/

为什么要做双引擎？

上次发帖后收到很多反馈，主要集中在两个方向：

1. "能不能更快？" —— 性能党
2. "能不能支持 xxx 语法？" —— 功能党

这两个需求看似矛盾，但我找到了一个优雅的解决方案：双引擎架构。

Marked 引擎（默认）—— 极速派

// 默认使用 marked ，可以省略
<IncremarkContent 
  :content="content" 
  :is-finished="isFinished"
  :incremark-options="{ engine: 'marked' }"
/>

特点：

• 🚀 极速：针对流式场景深度优化
• 🔧 自研扩展：我们为 marked 补齐了脚注、数学公式、自定义容器、内联 HTML 解析
• ⚡ Tree-shaking 友好：只打包你用到的功能

Micromark 引擎 —— 稳定派

<IncremarkContent 
  :content="content" 
  :is-finished="isFinished"
  :incremark-options="{ engine: 'micromark' }"
/>

特点：

• ✅ 严格 CommonMark：100% 规范兼容
• 🔌 丰富生态：直接使用 micromark/mdast 社区的所有插件
• 🛡️ 稳定可靠：久经考验的解析器

Tree-shaking 优化

为了打包体积，我们做了 tree-shaking 优化：

// 默认只打包 marked （极速模式）
import { createIncremarkParser } from '@incremark/core'
const parser = createIncremarkParser({ gfm: true })

// 如果需要 micromark ，单独导入
import { MicromarkAstBuilder } from '@incremark/core/engines/micromark'
const parser = createIncremarkParser({
  astBuilder: MicromarkAstBuilder,
  gfm: true
})

这样你的项目只会打包你实际使用的引擎，不用担心 bundle 体积问题。

我们为 Marked 做了什么增强？

原生 marked 不支持很多 AI 场景常用的语法，我们通过自研扩展补齐了这些能力：

这解释了为什么在某些基准测试中 Incremark 看起来"更慢"——因为我们在做更多的事情：

这是功能差异，不是性能问题。 Streamdown 跳过不支持的语法所以看起来更快，而 Incremark 完整解析了所有内容。

完整基准测试数据

为了让大家心里有底，我把 38 个测试文件的完整数据都放出来：

规律很明显：文档越长，Incremark 的优势越大。 这就是 O(n) vs O(n²) 的威力。

核心架构一览

┌─────────────────────────────────────────────────────────────────┐
│                      IncremarkContent                           │
│  (声明式组件，处理 content/stream 输入)                          │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                      IncremarkParser                            │
│  ┌─────────────────────────────────────────────────────────────┐
│  │              双引擎 AST 构建器                                │
│  │  ┌──────────────────┐    ┌──────────────────┐               │
│  │  │  MarkedAstBuilder│    │MicromarkAstBuilder│              │
│  │  │  (默认，极速)     │    │ (稳定，严格)      │               │
│  │  └──────────────────┘    └──────────────────┘               │
│  └─────────────────────────────────────────────────────────────┘
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│                     BlockTransformer                            │
│  (打字机效果，字符级增量渲染)                                     │
└─────────────────────────────────────────────────────────────────┘
                              ↓
┌─────────────────────────────────────────────────────────────────┐
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐          │
│  │     Vue      │  │    React     │  │    Svelte    │          │
│  │    组件库     │  │    组件库     │  │    组件库    │          │
│  └──────────────┘  └──────────────┘  └──────────────┘          │
└─────────────────────────────────────────────────────────────────┘

最简使用方式

我们推荐使用 IncremarkContent 组件，这是最简单的方式：

<script setup>
import { ref } from 'vue'
import { IncremarkContent } from '@incremark/vue'

const content = ref('')
const isFinished = ref(false)

// 处理 AI 流式输出
async function handleStream(stream) {
  content.value = ''
  isFinished.value = false
  
  for await (const chunk of stream) {
    content.value += chunk
  }
  
  isFinished.value = true
}
</script>

<template>
  <IncremarkContent 
    :content="content" 
    :is-finished="isFinished"
    :incremark-options="{ gfm: true, math: true }"
  />
</template>

新增 Svelte 支持

应社区要求，我们新增了 Svelte 5 支持：

pnpm add @incremark/svelte

<script lang="ts">
import { IncremarkContent } from '@incremark/svelte'

let content = $state('')
let isFinished = $state(false)
</script>

<IncremarkContent {content} {isFinished} />

致 V2EX 社区

说实话，这个项目的 star 大部分应该都是 V2EX 的朋友们贡献的。上次发帖后收到了很多有价值的反馈：

• @Leon6868 提的淡入动画 → 已实现 effect: 'fade-in'
• @weareoutman 提的 memo render → 我们的 BlockTransformer 就是干这个的
• 还有很多关于性能、兼容性的讨论

感谢大家的支持和反馈，让这个项目越来越好。

资源链接

• 📚 文档： https://www.incremark.com/
• 🎮 在线演示（ Vue ）： https://incremark-vue.vercel.app/
• 🎮 在线演示（ React ）： https://incremark-react.vercel.app/
• 🎮 在线演示（ Svelte ）： https://incremark-svelte.vercel.app/
• 💻 GitHub： https://github.com/kingshuaishuai/incremark

如果觉得有用，欢迎 star ⭐️

有任何问题或建议，欢迎在评论区讨论，或者直接提 issue 。