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# yarnyarn 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 themeimport '@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组件，和许多官网插件。