推荐一款超好用的Markdown编辑器！

Milkdown的功能特性主要有：

主要运用的技术及对应官网包括：

• Prosemirror，用来在web端构建编辑器本身，可以参考https://prosemirror.net/

• Remark，用于作为markdown的解析器，可以参考https://github.com/remarkjs/remark

• TypeScript，编写语法，https://www.typescriptlang.org/

• Emotion，用于构建样式，https://emotion.sh/

• Prism，代码块的支持，https://prismjs.com/

• Katex，渲染用，https://katex.org/

目前Milkdown提供直接在线使用功能，我们可以在其中任意的使用、体验。

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

打两个 ||

再打一个空格

点击表格左上角，可以对表格进行行列操作

同时可以支持左右屏分别显示源码和效果，方便比对，查看源码进行修改。

其他的功能小伙伴们可以自行尝试，应该可以满足大多数人的一般需要。

如果有什么额外想实现的功能，记得Milkdown是插件式的工具，除了自己直接编写插件，我们也可以先去官方插件库查找一下，看看是否已经有前人完成了我们的构思。

目前官方给出的插件有：

| 名称 | 描述 |

| — | — |

| @milkdown/preset-commonmark | 添加commonmark语法支持 |

| @milkdown/preset-gfm | 添加gfm语法支持 |

| @milkdown/plugin-history | 添加撤销和重做支持 |

| @milkdown/plugin-clipboard | 添加 markdown 格式的复制粘贴能力 |

| @milkdown/plugin-cursor | 添加 drop 和 gap 光标 |

| @milkdown/plugin-listener | 添加监听器支持 |

| @milkdown/plugin-collaborative | 添加协同编辑支持 |

| @milkdown/plugin-table | 添加表格语法支持（已经包含在 gfm 中） |

| @milkdown/plugin-prism | 添加 prism用于支持代码块高亮 |

| @milkdown/plugin-math | 添加 LaTeX用于支持数学公式 |

| @milkdown/plugin-tooltip | 添加选择工具条 |

| @milkdown/plugin-slash | 添加斜线指令 |

| @milkdown/plugin-emoji | 添加表情符号支持 |

同时官方还提供社区，让用户们可以自由地交流分享自己的插件，不过下载别人的插件需谨慎哦。

当然大家最关心的可能还是如何自己编写插件，其实不难，大多数插件的格式都是这样的：

import { MilkdownPlugin } from ‘@milkdown/core’;

const myPlugin: MilkdownPlugin = (pre) => {

// #1 准备阶段

return async (ctx) => {

// #2 执行阶段

};

};

主要由两部分组成，准备阶段和执行阶段。

准备阶段的内容就是将插件被通过use时，注册进milkdown，然后执行阶段就是在插件被真实加载时执行的内容。
说那么多不如自己上手练一练，想自己开发插件自给自足的小伙伴，或者喜欢这个风格想直接试用的小伙伴，赶紧一起来试试这个开源的Markdown编辑器吧：
点击下方卡片，关注公众号“TJ君”
回复“milk”，获取仓库地址

最后

由于篇幅限制，小编在此截出几张知识讲解的图解

图片转存中…(img-T3qujtSS-1718924381587)]

[外链图片转存中…(img-nqMoc7Vs-1718924381588)]

[外链图片转存中…(img-IqSpSNuW-1718924381588)]

[外链图片转存中…(img-X4HpLSjo-1718924381588)]