Cherry Markdown 编辑器完整指南：编辑、图表与 AI 流式渲染一次配齐

Cherry Markdown 编辑器完整指南：编辑、图表与 AI 流式渲染一次配齐

【免费下载链接】cherry-markdown✨ A Markdown Editor项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-markdown

写技术文档时，编辑器要么臃肿拖慢加载，要么简陋到表格、图表、公式都得自己补。Cherry Markdown 是腾讯开源的 JavaScript Markdown 编辑器，开箱即用、轻量且易于扩展，浏览器和 Node.js 服务端都能跑，适合在线写作、文档协作以及 AI 对话里的 Markdown 实时渲染。

项目速览

Cherry Markdown 由腾讯的 Cherry Oteam 团队维护，采用 Apache-2.0 许可证，核心用纯 JavaScript 实现，不绑定 Vue / React 等任何前端框架（框架只作为容器环境）。它要解决的问题很具体：让你用一个组件就拿到标题、目录、流程图、公式等绝大多数常用 Markdown 语法，而不必自己搭一套渲染管道。

核心能力拆解

流式渲染：让 AI 聊天输出不再闪源码

做大模型对话界面时，token 是一段段吐出来的，Markdown 还没写完，预览区就会暴露一堆#、|原始符号，观感很割裂。Cherry Markdown 的 Stream 构建产物就是为此优化的：流式输出过程中自动补全未闭合的片段，让"半成品"文档也能正常渲染。

所见即所得：图片、表格与一键导出

排版时最烦的往往是细节：图片大小不对、表格列宽难看、最后还得导成 PDF 发出去。这里的图片支持拖拽缩放与对齐，表格支持 WYSIWYG 编辑，直接在预览里调好再回写源码；配合工具栏还能一键导出为图片或 PDF。

图表、公式与多媒体：让 Markdown 会画图

想在纯文本文档里放流程图、数学公式或数据图表时，Cherry Markdown 内置了 Mermaid 图表（支持拖拽缩放与对齐）、数学公式、表格转图表，以及音视频嵌入，省去了再叠一层渲染库的麻烦。

安全与局部渲染：防 XSS 又少刷页面

文档里常会粘贴外部富文本，甚至可能混入不可信内容。Cherry Markdown 内置白名单过滤与 DomPurify 来拦截 XSS，同时用局部渲染 + 局部更新，长文档只重绘改动的那部分，滚动和连续输入都不卡。

典型使用场景

做 AI 对话产品时，团队常需要把模型的流式输出实时渲染成排版整齐的 Markdown。用它的 Stream 产物接上流式接口，就能避免渲染过程中源码闪现，对话区直接呈现成品效果。

写规范、写知识库的团队更看重富编辑体验：浮动工具栏、悬浮目录、多光标、VIM 模式和自定义快捷键一应俱全，再配上公式与 Mermaid，技术文档不用再多开几个工具。

如果你只想在本地安安静静写.md文件，基于 Tauri 的桌面客户端和官方 VSCode 插件都能打开、编辑本地的.md/.markdown/.txt，编辑体验与 Web 版保持一致。

适用边界与选型建议

它本质是一个可嵌入的编辑器组件，适合要把 Markdown 编辑能力做进自己 Web 项目、或专门做 AI 流式渲染的团队。如果你要的是带文件系统、版本管理、多人协作的完整笔记软件，光靠这个核心库不够，得再补一层工程。定位上，相比只读的 Markdown 渲染库，它是"能编辑"的完整版；相比重型富文本方案，它更轻、依赖更少。

快速上手

最短路径就是装包加两行初始化：

npm install cherry-markdown

import Cherry from 'cherry-markdown'; const cherry = new Cherry({ id: 'markdown-container' });

想先看效果，直接打开 示例目录 里的完整版 demo；完整配置项与 API 说明见 中文 README。

写在最后

一句话：Cherry Markdown 把"能编辑、会画图、能流式渲染、还防 XSS"塞进了一个轻量组件里，做在线写作或 AI 对话渲染时值得纳入选型。文档与配置详解见 README.CN.md。

【免费下载链接】cherry-markdown✨ A Markdown Editor项目地址: https://gitcode.com/GitHub_Trending/ch/cherry-markdown