* 戳上方藍字「 開源先鋒 」關註我
推薦閱讀：
大家好，我是開源君！
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
