comark

这是什么

• 一个以 TypeScript 编写的 Markdown 解析器，可将 CommonMark/GFM（加上少量的组件/属性扩展）转换为紧凑且可序列化的 AST。
• AST 可以在构建时、运行时或流式传输文本时（例如来自 LLM）生成，然后由特定框架的渲染器进行渲染。

主要功能

• 纯函数解析 – parseMarkdown(md) 会返回一个纯 JavaScript 结构 (['tag', props, …children])。没有副作用，因此您可以解析来自数据库、CMS 或实时 LLM 输出的内容，而无需重新构建。
• 支持流式传输 – 解析器会自动闭合未完成的语法（粗体、代码块、组件），因此可以逐帧显示部分 AI 生成的输出。
• 一个 AST，多种渲染器 – 同一个 AST 可以提供给 React、Vue、Svelte、Angular、纯 HTML 或 ANSI 终端输出的渲染器使用。
• 组件语法 – 内联自定义组件可以使用 ::component{…} … :: 在 Markdown 中编写（例如：警示、数学公式）。原生元素的属性通过 {.class} 支持。
• 插件生态系统 – 内置 Shiki 语法高亮、KaTeX 数学公式、Mermaid 图表、目录 (TOC)、警示、脚注等插件，并兼容于现有的 markdown-it 插件。
• 性能 – 基于 markdown-exit 构建，这是 markdown-it 的 TypeScript 重写版本。

如何使用

1. 安装核心包：

   npm install comark
   

2. 将 Markdown 解析为 AST：

   import { parseMarkdown } from 'comark'
   const tree = await parseMarkdown('# Hello **World**')
   // → { nodes: [['h1', { id: 'hello' }, 'Hello ', ['strong', {}, 'World']]], … }
   

3. 选择符合您 UI 技术栈的渲染器包，并传入相同的 AST 或原始 Markdown 字符串。
   • Vue – @comark/vue
   • React – @comark/react
   • Svelte – @comark/svelte
   • Angular – @comark/angular
   • HTML – @comark/html
   • ANSI (终端) – @comark/ansi
4. 渲染时可选择性加入插件（例如 KaTeX 数学公式）和自定义组件。

对 AI 生成内容的重要性

• LLM 通常会流式输出部分 Markdown；Comark 的自动闭合逻辑可在模型持续输入时保持 UI 稳定。
• 可序列化的 AST 让您可以存储或传输解析后的表示形式，避免在客户端重复解析。
• 由于解析器与框架无关，相同的 AI 生成 Markdown 可以在 Web 应用程序、原生框架或终端工具中显示，而无需重写内容。

包

包	用途
comark	核心解析器、AST 工具、插件系统
@comark/vue	Vue 3 渲染器
@comark/react	React 渲染器 (包含 Next.js Server Components)
@comark/svelte	Svelte 5 渲染器
@comark/angular	Angular 渲染器
@comark/nuxt	支持自动导入的 Nuxt 模块
@comark/html	渲染为纯 HTML 字符串
@comark/ansi	渲染为终端 ANSI

许可

• MIT，并附带友好的“Made with ❤️”注记。

总结 Comark 是一个现代化、支持流式传输的 Markdown 解析器与多框架渲染器，旨在协助开发者在多种前端界面上显示实时或 AI 生成的 Markdown，同时保持解析的快速与一致性。