推薦一款超好用的Markdown編輯器！

公眾號程序猿DD

共 2615字，需瀏覽 6分鐘

2021-09-27 09:10

這兩天臨近國慶，小編要寫的東西還蠻多，在編寫的閑暇想到一個有趣的問題，就是大家平時都使用什么編寫工具？

這幾年似乎Markdown編輯器逐漸成為行業(yè)里的主流，如果有還不了解的小伙伴，小編稍稍介紹一下。

Markdown編輯器，主要是可以使用一套格式標(biāo)記語言來對文檔內(nèi)容進行排版和格式顯示，而這種編輯器在程序猿圈子里逐漸受到歡迎的原因是：

1、讀寫改方便，Markdown的格式標(biāo)記語法簡單，常用的標(biāo)記只有十多個，相對來說非常輕量，上手很快，只需要學(xué)習(xí)幾個簡單的符號，然后就可以專注于碼字了，而不需要手動設(shè)置各種樣式。
2、一器多用，Markdown即可以用來編寫說明文檔并且在主流平臺都通用，又可以寫技術(shù)文章，寫出來的內(nèi)容中可以清晰的區(qū)分說明部分和代碼。
3、輸出方便，Markdown的文章可以輕松的轉(zhuǎn)換為html、pdf等多種不同方式。

目前國內(nèi)有各種各樣不同的Markdown編輯器，其中比較有名的就像Typora。

小編目前用的最多也是Typora。Typora的設(shè)計理念就是追求最極致的簡潔，讓你在編寫的同時就可以看到預(yù)覽的結(jié)果，但美中不足的是Typora是一款獨立的軟件，并沒有開源，很多小伙伴都想了解下，一款Markdown編輯器到底是怎么實現(xiàn)的？也有很多小伙伴想如何能讓編輯器里面加一下自己想要的定制化功能呢？

所以小編今天帶來的就是一款風(fēng)格同樣追求簡潔、集合了Markdown編輯器、組件化定制、插件引用于一身的開源項目。

Milkdown

就像名字中的milk一樣，整個編輯器就像牛奶一樣柔順可口，看著舒服。

和其他主流的Markdown編輯器不一樣的是，Milkdown將自己的功能組件化、模塊化，所以對于用戶來說，可以選擇自己需要的功能模塊，以插件的形式引用，這樣一方面可以減少不必要的資源的浪費，用戶不需要為了一個功能安裝其余一些不需要的功能，同時也方便滿足個性化的定制需求，自己有什么訴求只需要編寫一個獨立的NPM功能模塊包，然后通過NPM安裝就可以了。

Milkdown的功能特性主要有：

主要運用的技術(shù)及對應(yīng)官網(wǎng)包括：

Prosemirror，用來在web端構(gòu)建編輯器本身，可以參考https://prosemirror.net/
Remark，用于作為markdown的解析器，可以參考https://github.com/remarkjs/remark
TypeScript，編寫語法，https://www.typescriptlang.org/
Emotion，用于構(gòu)建樣式，https://emotion.sh/
Prism，代碼塊的支持，https://prismjs.com/
Katex，渲染用，https://katex.org/

目前Milkdown提供直接在線使用功能，我們可以在其中任意的使用、體驗。

例如像表格，在Milkdown中，只需要通過輸入 || 和一個空格，就可以完成。

打兩個 ||

再打一個空格

點擊表格左上角，可以對表格進行行列操作

同時可以支持左右屏分別顯示源碼和效果，方便比對，查看源碼進行修改。

其他的功能小伙伴們可以自行嘗試，應(yīng)該可以滿足大多數(shù)人的一般需要。

如果有什么額外想實現(xiàn)的功能，記得Milkdown是插件式的工具，除了自己直接編寫插件，我們也可以先去官方插件庫查找一下，看看是否已經(jīng)有前人完成了我們的構(gòu)思。

目前官方給出的插件有：

名稱	描述
@milkdown/preset-commonmark	添加commonmark語法支持
@milkdown/preset-gfm	添加gfm語法支持
@milkdown/plugin-history	添加撤銷和重做支持
@milkdown/plugin-clipboard	添加 markdown 格式的復(fù)制粘貼能力
@milkdown/plugin-cursor	添加 drop 和 gap 光標(biāo)
@milkdown/plugin-listener	添加監(jiān)聽器支持
@milkdown/plugin-collaborative	添加協(xié)同編輯支持
@milkdown/plugin-table	添加表格語法支持（已經(jīng)包含在 gfm 中）
@milkdown/plugin-prism	添加 prism用于支持代碼塊高亮
@milkdown/plugin-math	添加 LaTeX用于支持數(shù)學(xué)公式
@milkdown/plugin-tooltip	添加選擇工具條
@milkdown/plugin-slash	添加斜線指令
@milkdown/plugin-emoji	添加表情符號支持

同時官方還提供社區(qū)，讓用戶們可以自由地交流分享自己的插件，不過下載別人的插件需謹慎哦。

當(dāng)然大家最關(guān)心的可能還是如何自己編寫插件，其實不難，大多數(shù)插件的格式都是這樣的：

import { MilkdownPlugin } from '@milkdown/core';

const myPlugin: MilkdownPlugin = (pre) => {
    // #1 準(zhǔn)備階段
    return async (ctx) => {
        // #2 執(zhí)行階段
    };
};