* 戳上方蓝字「 开源先锋 」关注我
推荐阅读：
大家好，我是开源君！
Markdown在现代的技术文档编写、博客创作等领域已经变得非常流行，但传统的Markdown编辑器有时功能单一，不能完全满足我们的需求。
今天我们来聊聊腾讯推出的一款开源项目 -
Cherry Markdown
，很好的填补现有工具在易用性、扩展性等方面的空缺。
项目简介
Cherry Markdown
是一款基于JavaScript的Markdown编辑器，号称开箱即用，轻量且易于扩展。它既可以在浏览器中运行，也可以在服务器端使用Node.js运行。这意味着你可以在各种环境中自由使用这款编辑器。
以下是它的一些主要功能：
语法功能
图片缩放、对齐和引用
根据表格内容生成图表
调整字体颜色和大小
字体背景色、上标和下标
插入清单
插入音频或视频
多种模式
滚动同步实时预览
纯预览模式
无工具栏模式（极简编辑模式）
移动预览模式
功能特性
从富文本复制并粘贴为Markdown文本
经典换行和普通换行
多光标编辑
图片大小编辑
导出为图片或PDF
浮动工具栏：在新行开始时出现
气泡工具栏：在选择文本时出现
目前在Github上面收获了3.2K star！
性能特色
部分渲染：仅对需要更新的部分进行渲染，提升性能。
部分更新：仅对变化的部分进行更新，避免全局重绘。
多模式支持：包括实时预览、纯预览模式、无工具栏模式和移动预览模式，满足不同场景需求。
功能丰富：支持从富文本复制并粘贴为Markdown文本，多光标编辑，图片大小调整，导出为图片或PDF等。
内置安全钩子：通过过滤白名单和DomPurify进行扫描过滤。
快速安装使用
现在，让我们来看看如何快速上手使用Cherry Markdown。首先，我们需要通过npm或yarn安装它：
npm install cherry-markdown --save
# 或者使用 yarn
yarn add cherry-markdown
如果需要启用
mermaid
绘图和表格转图功能，还需要额外安装
mermaid
和
echarts
：
# 安装 mermaid
yarn add [email protected]
# 安装 echarts
yarn add [email protected]
安装完成后，我们可以在HTML页面中引入并初始化Cherry Markdown：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Cherry Markdown</title>
<linkrel=" stylesheet"href="path/to/cherry-markdown.css">
</head>
<body>
<divid="editor"></div>
<scriptsrc="path/to/cherry-markdown.js"></script>
<script>
const editor = new Cherry({
id: 'editor',
value: '# Hello Cherry Markdown!'
});
</script>
</body>
</html>
这样，我们就可以在网页中看到一个功能齐全的Markdown编辑器了！
项目体验展示
来看看官方提供的一些示例吧，展示了Cherry Markdown在不同场景下的应用。
完整模式
基础模式
移动端预览
无工具栏模式
Cherry Markdown 提供了丰富的功能和灵活的扩展性，使得我们可以根据自己的需求定制编辑器的功能和样式。这里展示一些其特色功能：
图片缩放、对齐与引用
字体颜色、字体大小、对齐方式灵活调整
复制Html粘贴成MD语法
多光标编辑，实现批量修改
draw.io画图
局部更新
还有很多...
总的来说，Cherry Markdown作为一款由腾讯推出的开源Markdown编辑器，不仅功能强大、性能优越，而且使用起来非常简单。无论是技术文档编写，还是博客写作，甚至是嵌入到自己的应用中，都是一个不错的选择。
更多细节功能，感兴趣的可以到项目地址查看：
项目地址：
https://github.com/Tencent/cherry-markdown
