ByteNoteByteNote
字

字节笔记本

2026年3月22日

Cherry Markdown - 腾讯开源 Markdown 编辑器

#开源工具

Cherry Markdown 是腾讯开源的一款功能强大的 JavaScript Markdown 编辑器，具备开箱即用、轻量级和易于扩展的特点，能够在浏览器端和 Node.js 服务端运行，目前在 GitHub 上已获得超过 4600 颗 Star，被超过 240 个项目使用。

项目简介

Cherry Markdown Writer 由腾讯团队开发和维护，是一款纯 JavaScript 实现的 Markdown 编辑器。它的设计理念是"开箱即用"与"易于扩展"并重：默认支持绝大多数常用的 Markdown 语法（包括标题、目录、流程图、公式等），同时提供完善的扩展机制，让开发者能够根据业务需求快速进行二次开发。

Cherry Markdown 不依赖任何前端框架（如 Angular、Vue、React），框架仅提供容器环境，这意味着它可以在任何前端项目中无缝集成。项目采用 Apache-2.0 许可证开源，拥有活跃的社区贡献和持续的版本迭代，目前已发布 94 个版本。

值得注意的是，Cherry Markdown 还专门为 AI Chat 场景提供了流式渲染（Streaming Rendering）构建版本，能够自动完成标题、加粗、链接、图片、代码块、公式、列表、表格、Mermaid 图表和脚注等语法元素的增量渲染，避免在流式输出过程中暴露 Markdown 源码。

核心特性

语法功能

  1. 图片操作：支持图片缩放、对齐和引用
  2. 图表生成：根据表格内容自动生成 ECharts 图表
  3. 字体样式：支持调整字体颜色、大小、背景色、上标和下标
  4. 清单列表：支持插入 CheckList（待办清单）
  5. 多媒体：支持插入音频和视频
  6. 图表绘制：内置 Mermaid 流程图和数学公式支持
  7. 信息面板：支持 Info 面板语法

功能特性

  1. 富文本粘贴：从富文本粘贴内容自动转换为 Markdown 格式
  2. 换行模式：支持经典换行和常规换行两种模式
  3. 多光标编辑：支持多光标同时编辑
  4. 图片编辑：支持图片尺寸调整
  5. Mermaid 图表编辑：支持拖拽调整大小，支持居中/左/右/浮动对齐
  6. 表格编辑：完整的表格 WYSIWYG 编辑功能
  7. 表格转图表：从表格内容生成图表
  8. 导出功能：支持导出为图片或 PDF
  9. 浮动工具栏：在新行开始时自动出现
  10. 气泡工具栏：选中文本时出现
  11. 快捷键：支持自定义快捷键设置
  12. 浮动目录：支持浮动目录导航
  13. 主题切换：内置多种样式主题
  14. 输入建议：支持自动补全功能
  15. VIM 模式：支持 VIM 编辑模式
  16. AI 流式输出：支持 AI Chat 场景的流式渲染

性能特性

  1. 局部渲染：仅渲染可视区域内容，提升长文档性能
  2. 局部更新：编辑时仅更新变化部分，避免全量重绘

安全特性

Cherry Markdown 内置安全 Hook，通过白名单过滤和 DomPurify 进行安全扫描过滤，有效防止 XSS 攻击。XSS 防护默认启用，如需禁用需手动配置。

技术栈

Cherry Markdown 的核心技术栈和构建产物如下：

构建版本文件MermaidCodeMirror适用场景
完整版cherry-markdown.js支持支持通用场景
核心版cherry-markdown.core.js不含支持不需要 Mermaid 的场景
流式版cherry-markdown.stream.js不含不含AI Chat 流式输出
  • 开发语言：JavaScript 75.3%、SCSS 11.7%、TypeScript 9.0%、Vue 2.9%
  • 代码编辑器：CodeMirror（核心版和完整版内置）
  • 流程图：Mermaid（完整版内置，核心版和流式版按需加载）
  • 图表库：ECharts（需额外安装）
  • 公式渲染：MathJax/KaTeX（通过 CDN 动态加载，不包含在任何构建包中）
  • 单元测试：Vitest
  • 代码规范：ESLint + Prettier
  • Git 规范：Commitlint + Husky

安装指南

通过 yarn 安装

bash
yarn add cherry-markdown

通过 npm 安装

bash
npm install cherry-markdown --save

如果需要启用 Mermaid 绘图和表格转图表功能，还需额外安装 mermaid 和 echarts 包：

bash
npm install mermaid echarts --save

Cherry Markdown 已内置 mermaid，如需使用指定版本的 mermaid，可以参照官方 Wiki 文档进行配置。

快速开始

浏览器环境 - UMD 方式

html
<link href="cherry-editor.min.css" />
<div id="markdown-container"></div>
<script src="cherry-editor.min.js"></script>
<script>
  new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
</script>

浏览器环境 - ESM 方式

javascript
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown';

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Node.js 环境（纯语法编译）

javascript
const { default: CherryEngine } = require('cherry-markdown/dist/cherry-markdown.engine.core.common');
const cherryEngineInstance = new CherryEngine();
const htmlContent = cherryEngineInstance.makeHtml('# welcome to cherry editor!');

核心版（不含 Mermaid）

javascript
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

流式版（适用于 AI Chat 场景）

javascript
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.stream';

const cherryInstance = new Cherry({
  id: 'markdown-container',
});

cherryInstance.setMarkdown('# welcome to cherry editor!');

使用示例

按需加载 Mermaid 插件

javascript
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';
import CherryMermaidPlugin from 'cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin';
import mermaid from 'mermaid';

// 插件注册必须在 Cherry 实例化之前完成
Cherry.usePlugin(CherryMermaidPlugin, {
  mermaid,
});

const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: '# welcome to cherry editor!',
});

Webpack 动态导入 Mermaid

javascript
import 'cherry-markdown/dist/cherry-markdown.css';
import Cherry from 'cherry-markdown/dist/cherry-markdown.core';

const registerPlugin = async () => {
  const [{ default: CherryMermaidPlugin }, mermaid] = await Promise.all([
    import('cherry-markdown/src/addons/cherry-code-block-mermaid-plugin'),
    import('mermaid'),
  ]);
  Cherry.usePlugin(CherryMermaidPlugin, {
    mermaid,
  });
};

registerPlugin().then(() => {
  const cherryInstance = new Cherry({
    id: 'markdown-container',
    value: '# welcome to cherry editor!',
  });
});

异步渲染回调（Mermaid v10+）

从 Mermaid v10.0.0 开始，渲染逻辑从同步变为异步。在 afterChange 或 afterInit 事件后，Mermaid 代码块会先渲染为占位符，然后异步替换。如需获取异步渲染完成后的内容：

javascript
const cherryInstance = new Cherry({
  id: 'markdown-container',
  value: `
    \`\`\`mermaid
    graph LR
        A[Company] -->| Off work | B(Market)
        B --> C{See<br>melon seller}
        C -->|Yes| D[Buy a bun]
        C -->|No| E[Buy one pound of buns]
    \`\`\`
  `,
  callback: {
    afterAsyncRender: (md, html) => {
      // md 是 markdown 源码，html 是渲染结果
      console.log('渲染完成:', html);
    }
  }
});

自定义语法扩展

Cherry Markdown 支持自定义语法扩展，开发者可以参照官方的自定义语法文档进行开发，快速扩展编辑器能力。

自定义工具栏

Cherry 支持 5 个工具栏位置，每个位置都可以通过配置扩展自定义工具栏按钮，详细配置方式请参考官方的工具栏配置文档。

项目链接

开源工具
上一篇

HistoryOfEverything - Flutter 炫酷垂直时间线应用

下一篇

Cherry Markdown - 腾讯开源 Markdown 编辑器

分享: