Markdwon之痛

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

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

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

由于这些局限性，如果我们想给自己的网站或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();
复制代码