对付创作平台来说内容编辑器是十分主要的功能，强大的编辑器可以让创作者专注于创作“笔”下生花。而最好媚谄程序员创作者的方法之一便是支持 Markdown 写作，由于大多数程序员都是用 Markdown 来写文章。
Markdown 作为程序员写作的心头爱，有很多优点：
但，同样的也有些缺陷：
那有没有能够即保留 Markdown 带来的便利，同时又降落门槛的办法呢？大多数老玩家会脱口而出：Typora
Typora 直策应用完备没有问题，但由于它没有开源。如果想在自己的项目实现类似的 Markdown 编辑器，就须要另寻方案了。
如果你正在探求功能强大、易于接入、所见即所得的 Markdown 编辑器、组件、插件，就请花 5 分钟读完本文！
接下来 HelloGitHub 带来的开源项目完备知足上述需求。Milkdown 一款高颜值+自由（插件）的所见即所得，凑集 Markdown 编辑器、组件、插件于一身的开源项目。
https://github.com/Saul-Mirone/milkdown
你想要的功能它都有，不要的功能也可以通过删减插件，减少体积。插件的设计思想+完善的中文文档，让你分分钟定制出最适宜自己的 Markdown 编辑器！
下面随着项目作者一起来感想熏染 Milkdown 的魅力吧。
一、上手下面供应了 2 种办法，可直接体验：
在线考试测验：https://milkdown.dev/#/online-demo
VS Code 插件：https://marketplace.visualstudio.com/items?itemName=mirone.milkdown
1.1 功能展示方便的编写表格：
直接粘贴和复制 Markdown 文本：
乃至协同编辑：
双栏 Markdown 编辑器很常见。但 双向绑定 的 Markdown 编辑器，目前仅此一家：
功能方面就先容这么多，下面用 Milkdown 轻松实现个编辑器。
1.2 第一个编辑器Milkdown 的核心以及各种插件都是独立的 NPM 包，可以直接通过 NPM 来进行安装。
npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord上手也十分大略：
import { Editor } from '@milkdown/core';import { nord } from '@milkdown/theme-nord';import { commonmark } from '@milkdown/preset-commonmark';Editor .make() .use(nord) .use(commonmark) .create();我们先利用 make 来初始化编辑器，然后利用 use 来加载插件，末了利用 create 来创建编辑器。
1.3 丰富的插件
插件是 Milkdown 的核心，它实质上便是一个插件加载器，统统功能都是通过插件来供应的。表格是一个插件、主题是一个插件、乃至一行大略的文本也是一个插件。
目前官方已经供应了许多插件，确保可以开箱即用。下面仅列举了部分插件：
也可以自己动手编写插件，更多详情
二、技能栈Milkdown 基于下面的工具实现：
Prosemirror：一个用于在 web 端构建富文本编辑器的工具包Remark：精确的 Markdown 解析器TypeScript：以 TypeScript 编写Emotion：用于构建样式的强大的 css in js 工具Prism：代码块支持Katex：高性能的渲染数学公式富文本编辑器本身是一个天坑。虽然 ContentEditable 看起来很美好，但实际用起来就会创造问题层出不穷。因此我们基于 Prosemirror 来实现富文本编辑器。由于它足够成熟、久经工业的熬炼，并且拥有良好的架构和 API 设计。
三、架构Prosemirror 的核心逻辑实在类似于 React，它通过一种函数式的数据映射来表示编辑器的 UI 和内部状态的关系，如图：
编辑器通过 EditorState 来保存当前状态，并由 EditorState 产生出 EditorView，即 UI 视图。 用户在 UI 视图上进行的操作终极会产生 DOM event，例如：input 事宜、click 事宜。DOM event 事宜会产生 Transaction，代表了对 State 的修正，类似于 Redux 或 Vuex 中的 Action。 这些 Transaction 会与原来的 EditorState 进行打算，产生新的 EditorState，如此循环。
Prosemirror 通过这样的办法将编辑器中的每个状态以 EditorState 的办法保存了下来，它是一颗树状构造。而有一点编译事理根本的朋友都知道，任何编程措辞都有对应的 AST（抽象语法树）。因此我们须要的便是建立 Prosemirror 中的 EditorState 与 Markdown 的抽象语法树之间的联系。 Remark 完美契合我们的需求，由于它有设计良好的 AST，并且易于扩展自己的语法。
这样一来 Milkdown 的架构也逐渐清晰：
Markdown <-> Remark AST <-> Prosemirror State <-> UI
四、结语在开始这个项目前，我考试测验过各种各样的 Markdown 编辑器，但没有找到一款特殊满意的。由于它们都是闭源，而且功能由开拓商供应，有的功能太过于臃肿、有的又太过大略。 既然这样，我索性自己做一款能够轻松定制功能，非程序员也能轻松利用的 Markdown 编辑器，也就有了大家看到的 Milkdown。
希望开源的 Milkdown 让用户有更自由的选择，冲破 Markdown 编辑器的“垄断”。开源不易如果 Milkdown 对您有帮助，也请给个 Star✨。
末了，感谢 HelloGithub 的支持和帮助。Milkdown 先是有幸入选了 第 65 期 月刊，然后受邀互助了这篇文章，让更多人知道我的开源项目。
