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 组件，和许多官网插件。