手写 0 行代码，打造媲美社区顶尖的流式 Markdown 渲染组件库

无需手敲一行代码，基于 OpenSpec + CodeBuddy 的智能开发流水线，笔者构建了多框架、高性能、开箱即用的流式 Markdown 渲染解决方案 —— @superlc/md。丝滑体验，直逼 streamdown、x-markdown 等社区明星项目。

引言：当 AI 对话遇上传统 Markdown 渲染

你是否遇到过这样的场景？

• AI 助手逐字输出，页面却要等整段完成才突然渲染，体验割裂
• 长文档实时编辑，每次输入都触发全量重解析，性能卡顿
• 多框架项目，React、Vue 各找各的库，API 不统一，维护成本高
• 想要流式渲染，却发现社区方案要么太重，要么不支持生产级特性

传统 Markdown 渲染器是为「静态文档」设计的，而在 AI 对话、实时协作文档、代码片段预览等流式场景下，它们显得力不从心。

笔者的答案：@superlc/md

@superlc/md 是一个基于 unified 生态的高性能 Markdown 渲染组件库，专为流式场景优化，同时支持 React 和 Vue 3。

相关链接：在线文档 | npm: @superlc/md-core | npm: @superlc/md-react | npm: @superlc/md-vue

🚀 快速开始

安装

# React 项目
npm install @superlc/md-react

# Vue 项目
npm install @superlc/md-vue

基础使用

// React
import { Markdown } from '@superlc/md-react';
import '@superlc/md-react/styles.css';

function App() {
  return <Markdown>{'# Hello World\n\n这是一段 **Markdown** 文本。'}</Markdown>;
}

<!-- Vue -->
<script setup>
import { Markdown } from '@superlc/md-vue';
import '@superlc/md-vue/styles.css';
</script>

<template>
  <Markdown content="# Hello World\n\n这是一段 **Markdown** 文本。" />
</template>

流式渲染（AI 对话场景）

import { Markdown } from '@superlc/md-react';
import '@superlc/md-react/styles.css';

function ChatMessage({ stream }) {
  const [content, setContent] = useState('');

  useEffect(() => {
    // 模拟流式接收
    stream.on('data', (chunk) => {
      setContent((prev) => prev + chunk);
    });
  }, [stream]);

  return <Markdown streaming>{content}</Markdown>;
}

🎬 效果演示

Demos

✨ 核心特性

1. 专为流式渲染优化

2. 开箱即用，功能完备

• GFM 全支持：表格、任务列表、删除线、自动链接
• 代码高亮：内置 highlight.js，支持 190+ 语言
• 数学公式：内置 KaTeX，LaTeX 语法支持完善
• 内置样式：精心设计的排版样式，一行代码引入即可使用
• 暗黑模式：原生支持 Light/Dark 双主题，自动跟随系统偏好

3. 样式方案：CSS 变量 + 零配置暗黑模式

// 一行代码引入样式
import '@superlc/md-react/styles.css';

核心设计：

• 纯 CSS 实现：无运行时开销，框架无关
• CSS 变量驱动：所有颜色、间距、字体均可通过变量覆盖
• 自动暗黑模式：通过 prefers-color-scheme 媒体查询自动切换
• 手动控制：支持 .light / .dark 类名强制指定主题

/* 自定义主题色 */
:root {
  --md-primary-color: #1890ff;
  --md-code-bg: #f6f8fa;
}

/* 暗黑模式自动适配 */
@media (prefers-color-scheme: dark) {
  :root {
    --md-code-bg: #161b22;
  }
}

4. 高度可扩展

• 插件系统：完整支持 remark/rehype 插件生态
• 组件覆盖：自定义任意 HTML 元素的渲染逻辑
• TypeScript 优先：完整的类型定义和泛型支持

🏗️ 设计理念

核心原则

1. 解析与渲染分离：@superlc/md-core 纯逻辑，无框架依赖
2. 增量优先：所有设计都考虑流式场景的增量化
3. 框架原生：React/Vue 版本使用各自的最佳实践，而非最小公倍数

技术栈选择

• unified：Markdown 处理的事实标准，插件生态丰富
• hast：HTML AST，为多框架渲染提供通用中间表示
• TypeScript：类型安全，开发体验优秀

🎯 零代码开发：OpenSpec + CodeBuddy 的智能流水线

除了技术方案本身，这个项目更值得一书的是它的诞生方式：笔者没有手写一行业务代码，全程由 OpenSpec 规范驱动 + CodeBuddy AI 助理实施。

传统开发 vs 笔者的方式

OpenSpec vs VibeCoding（对话式 AI 编码）

核心价值：OpenSpec 将工程师从"翻译需求 → 编写代码"的重复劳动中解放，转变为"定义规范 → 验收结果"的更高维度设计者。

为什么选择 OpenSpec？

• 抗遗忘：规范文件不会"忘记"上下文，而聊天 AI 可能几轮后就偏离初衷
• 可复用：同一份规范可反复用于回归测试、新成员培训、代码审查
• 自动化：validate 命令自动捕捉遗漏场景，减少人工审查成本
• 规模化：团队协作时，规范作为唯一接口，消除沟通歧义

一句话总结：OpenSpec 不是"更好的 AI 编码工具"，而是"用 AI 实现规范驱动开发"的完整方法论。

📖 背后的故事

很多读者朋友可能好奇：为什么会有 @superlc/md 这个组件库？

这要追溯到笔者之前写的一篇关于流式渲染 Markdown 的技术文章（文章链接）。文章发布后，收到了不少反馈：有的朋友希望看到完整源码，有的咨询能否提供 Vue 版本——因为当时那篇文章是基于公司内部的 React 项目做的优化。

这些反馈让笔者意识到：流式渲染的需求是真实存在的，但社区缺乏一个开箱即用、多框架支持的生产级解决方案。

于是，一个想法逐渐清晰：为什么不打造一个既支持 React 也支持 Vue 的流式 Markdown 渲染组件库？这个想法最终在 OpenSpec + CodeBuddy 的助力下，以「零手写代码」的方式变成了现实。

结语：开发范式的新可能

@superlc/md 不仅仅是一个 Markdown 渲染库，它代表了一种新的开发范式：

规范即代码，AI 即工人，需求到产品的路径被极度压缩。

传统开发中，工程师将需求「翻译」为代码；在笔者的模式中，工程师将需求「描述」为规范，AI 负责精准实施。这不仅提升了开发效率，更保证了实现与需求的高度一致。

如果你正在寻找：

• ✅ 高性能流式 Markdown 渲染
• ✅ React/Vue 双框架支持
• ✅ 开箱即用的生产级特性

那么 @superlc/md 值得你尝试。更重要的是，它的诞生方式可能为你团队的开发流程带来新的启发。

延伸思考：当 AI 能够理解规范并实施代码，工程师的角色会发生怎样的转变？工程师群体是在被取代，还是在向更高维度的「规范设计师」演进？

欢迎在评论区分享你的看法。