当富文本遇上Markdown - Milkdown简介

Posted 2021-09-04 Saul-Mirone

Markdwon之痛

作为程序员，平时总少不了和markdown打交道，知识管理，项目文档，静态博客...然而繁琐的输入和一定的学习门槛劝退了不少非程序员，使得markdown这种简洁优雅的文档载体只能成为少数代码人手中的工具，而无法普及到更多地方。

那么，能否让编辑markdown的成本降低，以类似于富文本编辑的方式来编写markdown呢？答案当然是肯定的，大名鼎鼎的typora正因这样的特性而收到许多人的欢迎。但是Typora作为一个桌面应用，也有着自己的局限性：

1. 闭源，只能下载app使用
2. 仅支持给定的一些语法，无法自行扩展

由于这些局限性，如果我们想给自己的网站或electron应用中加上typora，或者我们想自己定义一些markdown语法，显然并不能做得到。

---

Milkdown简介

正因如此，才有了Milkdown这个轮子，它提供了一种插件化的开发所见即所得的Markdown编辑器的能力，并且提供了一系列官方插件以保证编辑器能够开箱即用，如果你需要定制化能力，也可以通过编写插件来实现。你也可以编写自己的主题，来让编辑器完全按照你需要的样式来展示。

点我在线试用

那么如何在自己的web app里用上milkdown呢？

快速搭建项目

这里使用vite来快速搭建一个demo项目:

# npm 7
$ npm init @vitejs/app milkdown-demo -- --template vanilla-ts

# npm 6
$ npm init @vitejs/app milkdown-demo --template vanilla-ts

# yarn
yarn create @vitejs/app milkdown-demo --template vanilla-ts

搭建好项目后使用npm install（或yarn install如果您使用yarn）来安装依赖。

安装

npm install @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord

使用

import { Editor } from \'@milkdown/core\';
import { commonmark } from \'@milkdown/preset-commonmark\';

// import theme
import \'@milkdown/theme-nord/lib/theme.css\';

const root = document.body;
const defaultValue = \'你好，[milkdown](https://saul-mirone.github.io/)很高兴认识你。\';
new Editor({ root, defaultValue }).use(commonmark).create();

此时使用npm run dev(或yarn dev如果您用yarn)，我们就能在浏览器中看到Milkdown编辑器了！

---

除了原生js，milkdown还提供了开箱即用的react和vue3组件，和许多官方插件。