活字格使用門檻低，可以實(shí)現(xiàn)系統(tǒng)的快速成型、高效開發(fā)。產(chǎn)品穩(wěn)定可靠，維護(hù)起來(lái)也非常容易，能夠降低50%的開發(fā)成本。低代碼開發(fā)平臺(tái)的可拓展性強(qiáng)，能夠通過(guò)插件機(jī)制實(shí)現(xiàn)特定功能，非常利于系統(tǒng)的延展和迭代。

——個(gè)人開發(fā)者 任浩

一、背景介紹

Markdown編輯器使用一套格式標(biāo)記語(yǔ)言來(lái)對(duì)文檔內(nèi)容進(jìn)行排版和格式顯示，深受技術(shù)人員的喜愛(ài)并得到廣泛應(yīng)用，可以用來(lái)編寫各類的說(shuō)明文檔，例如技術(shù)博客。使用Markdown編輯器編寫的說(shuō)明文檔可以在很多技術(shù)平臺(tái)進(jìn)行使用，它能夠使得說(shuō)明部分和代碼部分都非常清晰易讀。

按照Markdown編輯器的使用環(huán)境，通常會(huì)被分為三大類：

1、平臺(tái)集成工具：各大在線博客、社區(qū)平臺(tái)自帶的寫作工具，比如CSDN、博客園等。

2、獨(dú)立軟件類：可以將該部分軟件下載到自己的機(jī)器上進(jìn)行獨(dú)立使用，用于編輯本地文件，比如MarkdownEditor、Haroopad等。

3、插件類：本身不能被獨(dú)立使用，但是可以安裝到主流的編輯器中，從而使得現(xiàn)有的編輯器具有Markdown的功能。

隨著Markdown排版方式的普及，越來(lái)越多的應(yīng)用開始集成Markdown編輯器。目前主流可集成的Markdown編輯器現(xiàn)狀分為：僅支持分屏預(yù)覽，即編輯區(qū)和預(yù)覽區(qū)分離；同時(shí)支持所見(jiàn)即所得和分屏預(yù)覽，但所見(jiàn)即所得的模式下不能完整支持Markdown語(yǔ)法排版；幾乎沒(méi)有類似Typora的即時(shí)渲染能力。而這三點(diǎn)恰好對(duì)應(yīng)了三種常見(jiàn)的應(yīng)用場(chǎng)景：

• 分配預(yù)覽：適配傳統(tǒng)的Markdown使用場(chǎng)景，適合大屏下編輯排版；
• 所見(jiàn)即所得：對(duì)不熟悉Markdown的用戶友好，熟悉Markdown的用戶也可以無(wú)縫使用；
• 即時(shí)渲染：最為優(yōu)雅的Markdown編輯方式，讓熟悉Markdown的用戶能夠更專注于內(nèi)容創(chuàng)作。因此，對(duì)于一個(gè)能夠適配應(yīng)用場(chǎng)景的Markdown編輯器至關(guān)重要，它需要考慮到：

1. 傳統(tǒng)Markdown用戶的使用場(chǎng)景，提供分屏預(yù)覽的能力

2. 富文本編輯類用戶的使用場(chǎng)景，提供所見(jiàn)即所得的能力

3. 高階Markdown用戶的使用場(chǎng)景，提供即時(shí)渲染的能力

二、功能介紹

Markdown編輯器（單元格插件）支持活字格V8.0版本，為適配不同的應(yīng)用場(chǎng)景而生。能夠支持三種編輯模式：支持三種編輯模式：所見(jiàn)即所得（wysiwyg）、即時(shí)渲染（ir）、分屏預(yù)覽（sv）。

Markdown編輯器（單元格插件）能夠支持大綱、數(shù)學(xué)公式、腦圖、圖表、流程圖、甘特圖、時(shí)序圖、五線譜、多媒體、語(yǔ)音閱讀、標(biāo)題錨點(diǎn)、代碼高亮及復(fù)制、graphviz
渲染、plantumlUML圖。同時(shí)，內(nèi)置安全過(guò)濾、導(dǎo)出、圖片懶加載、任務(wù)列表、多平臺(tái)預(yù)覽、多主題切換、復(fù)制到微信公眾號(hào)/知乎功能。實(shí)現(xiàn)了
CommonMark 和 GFM 規(guī)范，可對(duì) Markdown 進(jìn)行格式化和語(yǔ)法樹查看，并支持 10+
項(xiàng)配置。工具欄包含 36+ 項(xiàng)操作，除支持?jǐn)U展外還可對(duì)每一項(xiàng)中的快捷鍵、提示、提示位置、圖標(biāo)、點(diǎn)擊事件、類名、子工具欄進(jìn)行自定義。除此之外還包含：

• 表情/at/話題等自動(dòng)補(bǔ)全擴(kuò)展
• 可使用拖拽、剪切板粘貼上傳，顯示實(shí)時(shí)上傳進(jìn)度，支持 CORS 跨域上傳
• 實(shí)時(shí)保存內(nèi)容，防止意外丟失
• 錄音支持，用戶可直接發(fā)布語(yǔ)音
• 粘貼 HTML 自動(dòng)轉(zhuǎn)換為Markdown，如粘貼中包含外鏈圖片可通過(guò)指定接口上傳到服務(wù)器
• 支持主窗口大小拖拽、字符計(jì)數(shù)
• 多主題支持，內(nèi)置黑白綠三套主題
• 多語(yǔ)言支持，內(nèi)置中、英、韓文本地化
• 支持主流瀏覽器，對(duì)移動(dòng)端友好

操作配置及功能說(shuō)明

Markdown編輯器（單元格插件）可配置的內(nèi)容包含：

• 所有CommonMark語(yǔ)法：分隔線、ATX標(biāo)題、Setext標(biāo)題、縮進(jìn)代碼塊、圍欄代碼塊、HTML塊、鏈接引用定義、段落、塊引用、列表、反斜杠轉(zhuǎn)義、HTML實(shí)體、行級(jí)代碼、強(qiáng)調(diào)、加粗、鏈接、圖片、行級(jí)HTML、硬換行、軟換行和純文本。
• 所有GFM語(yǔ)法：表格、任務(wù)列表項(xiàng)、刪除線、自動(dòng)鏈接、XSS過(guò)濾
• 常用 Markdown 擴(kuò)展語(yǔ)法：腳注、ToC、自定義標(biāo)題 ID
• 圖表語(yǔ)法
• 通過(guò) Mermaid 支持流程圖、時(shí)序圖、甘特圖
• Graphviz
• 通過(guò)ECharts 支持折線圖、餅圖、腦圖等，
• 通過(guò) abc.js 支持五線譜
• 通過(guò) MathJax 和 KaTeX 支持?jǐn)?shù)學(xué)公式含數(shù)學(xué)公式塊、行級(jí)數(shù)學(xué)公式
• YAML Front Matter
• 中文語(yǔ)境優(yōu)化
• 中西文之間插入空格
• 術(shù)語(yǔ)拼寫修正
• 中文后跟英文逗號(hào)、句號(hào)等標(biāo)點(diǎn)替換為中文模式
• 支持暗黑模式
• 支持隱藏工具欄
• 支持固定工具欄
• 支持顯示大綱及位置
• 支持顯示字?jǐn)?shù)統(tǒng)計(jì)

（運(yùn)行界面）

（暗黑模式）

（模式預(yù)覽）

（數(shù)學(xué)公式）

（腦圖）

（流程圖）

（甘特圖）

（時(shí)序圖）

（圖表）

（五線譜）

（多媒體）