推薦一款超好用的Markdown編輯器！
這兩天臨近國(guó)慶，小編要寫的東西還蠻多，在編寫的閑暇想到一個(gè)有趣的問(wèn)題，就是大家平時(shí)都使用什么編寫工具？
這幾年似乎Markdown編輯器逐漸成為行業(yè)里的主流，如果有還不了解的小伙伴，小編稍稍介紹一下。
Markdown編輯器，主要是可以使用一套格式標(biāo)記語(yǔ)言來(lái)對(duì)文檔內(nèi)容進(jìn)行排版和格式顯示，而這種編輯器在程序猿圈子里逐漸受到歡迎的原因是：
1、讀寫改方便，Markdown的格式標(biāo)記語(yǔ)法簡(jiǎn)單，常用的標(biāo)記只有十多個(gè)，相對(duì)來(lái)說(shuō)非常輕量，上手很快，只需要學(xué)習(xí)幾個(gè)簡(jiǎn)單的符號(hào)，然后就可以專注于碼字了，而不需要手動(dòng)設(shè)置各種樣式。
2、一器多用，Markdown即可以用來(lái)編寫說(shuō)明文檔并且在主流平臺(tái)都通用，又可以寫技術(shù)文章，寫出來(lái)的內(nèi)容中可以清晰的區(qū)分說(shuō)明部分和代碼。
3、輸出方便，Markdown的文章可以輕松的轉(zhuǎn)換為html、pdf等多種不同方式。
目前國(guó)內(nèi)有各種各樣不同的Markdown編輯器，其中比較有名的就像Typora。
小編目前用的最多也是Typora。Typora的設(shè)計(jì)理念就是追求最極致的簡(jiǎn)潔，讓你在編寫的同時(shí)就可以看到預(yù)覽的結(jié)果，但美中不足的是Typora是一款獨(dú)立的軟件，并沒(méi)有開源，很多小伙伴都想了解下，一款Markdown編輯器到底是怎么實(shí)現(xiàn)的？也有很多小伙伴想如何能讓編輯器里面加一下自己想要的定制化功能呢？
所以小編今天帶來(lái)的就是一款風(fēng)格同樣追求簡(jiǎn)潔、集合了Markdown編輯器、組件化定制、插件引用于一身的開源項(xiàng)目。
Milkdown
就像名字中的milk一樣，整個(gè)編輯器就像牛奶一樣柔順可口，看著舒服。
和其他主流的Markdown編輯器不一樣的是，Milkdown將自己的功能組件化、模塊化，所以對(duì)于用戶來(lái)說(shuō)，可以選擇自己需要的功能模塊，以插件的形式引用，這樣一方面可以減少不必要的資源的浪費(fèi)，用戶不需要為了一個(gè)功能安裝其余一些不需要的功能，同時(shí)也方便滿足個(gè)性化的定制需求，自己有什么訴求只需要編寫一個(gè)獨(dú)立的NPM功能模塊包，然后通過(guò)NPM安裝就可以了。
Milkdown的功能特性主要有：
主要運(yùn)用的技術(shù)及對(duì)應(yīng)官網(wǎng)包括：
Prosemirror，用來(lái)在web端構(gòu)建編輯器本身，可以參考https://prosemirror.net/ Remark，用于作為markdown的解析器，可以參考https://github.com/remarkjs/remark TypeScript，編寫語(yǔ)法，https://www.typescriptlang.org/ Emotion，用于構(gòu)建樣式，https://emotion.sh/ Prism，代碼塊的支持，https://prismjs.com/ Katex，渲染用，https://katex.org/
目前Milkdown提供直接在線使用功能，我們可以在其中任意的使用、體驗(yàn)。
例如像表格，在Milkdown中，只需要通過(guò)輸入 || 和一個(gè)空格，就可以完成。
打兩個(gè) ||
再打一個(gè)空格
點(diǎn)擊表格左上角，可以對(duì)表格進(jìn)行行列操作
同時(shí)可以支持左右屏分別顯示源碼和效果，方便比對(duì)，查看源碼進(jìn)行修改。
其他的功能小伙伴們可以自行嘗試，應(yīng)該可以滿足大多數(shù)人的一般需要。
如果有什么額外想實(shí)現(xiàn)的功能，記得Milkdown是插件式的工具，除了自己直接編寫插件，我們也可以先去官方插件庫(kù)查找一下，看看是否已經(jīng)有前人完成了我們的構(gòu)思。
目前官方給出的插件有：
| 名稱 | 描述 |
|---|---|
| @milkdown/preset-commonmark | 添加commonmark語(yǔ)法支持 |
| @milkdown/preset-gfm | 添加gfm語(yǔ)法支持 |
| @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 | 添加表格語(yǔ)法支持（已經(jīng)包含在 gfm 中） |
| @milkdown/plugin-prism | 添加 prism用于支持代碼塊高亮 |
| @milkdown/plugin-math | 添加 LaTeX用于支持?jǐn)?shù)學(xué)公式 |
| @milkdown/plugin-tooltip | 添加選擇工具條 |
| @milkdown/plugin-slash | 添加斜線指令 |
| @milkdown/plugin-emoji | 添加表情符號(hào)支持 |
同時(shí)官方還提供社區(qū)，讓用戶們可以自由地交流分享自己的插件，不過(guò)下載別人的插件需謹(jǐn)慎哦。
當(dāng)然大家最關(guān)心的可能還是如何自己編寫插件，其實(shí)不難，大多數(shù)插件的格式都是這樣的：
import { MilkdownPlugin } from '@milkdown/core';
const myPlugin: MilkdownPlugin = (pre) => {
// #1 準(zhǔn)備階段
return async (ctx) => {
// #2 執(zhí)行階段
};
};
主要由兩部分組成，準(zhǔn)備階段和執(zhí)行階段。
準(zhǔn)備階段的內(nèi)容就是將插件被通過(guò)use時(shí)，注冊(cè)進(jìn)milkdown，然后執(zhí)行階段就是在插件被真實(shí)加載時(shí)執(zhí)行的內(nèi)容。
說(shuō)那么多不如自己上手練一練，想自己開發(fā)插件自給自足的小伙伴，或者喜歡這個(gè)風(fēng)格想直接試用的小伙伴，趕緊一起來(lái)試試這個(gè)開源的Markdown編輯器吧：
點(diǎn)擊下方卡片，關(guān)注公眾號(hào)“TJ君”
回復(fù)“milk”，獲取倉(cāng)庫(kù)地址