The pain of Markdwon
Working with Markdown, knowledge management, project documentation, static blogs… However, cumbersome input and a certain learning barrier have discouraged many non-programmers, leaving Markdown as a simple and elegant documentation tool for a few code owners.
So, can we make it cheaper to edit Markdown and write markdown in a way similar to rich text editing? Of course, the answer is yes, the famous Typora is popular with many people because of such characteristics. But As a desktop application, Typora has its limitations:
- Closed source, can only download app use
- Only some given syntax is supported and cannot be extended by itself
Because of these limitations, if we wanted to add Typora to our own website or electron app, or if we wanted to define some Markdown syntax ourselves, we obviously couldn’t do it.
Milkdown profile
Hence the Milkdown wheel, which provides a plug-in capability to develop the WySIWYG Markdown editor, and a series of official plug-ins to ensure that the editor works out of the box, or if you need customization capabilities, you can write plug-ins to do so. You can also write your own themes to make the editor look exactly as you want.
Click on me to try it online
So how to use MilkDown in your web app?
Quick Build project
Here’s how to quickly build a demo project using Vite:
# 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
Copy the code
Once the project is set up, use NPM Install (or YARN Install if you use YARN) to install the dependencies.
The installation
npm install @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord
Copy the code
use
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 = 'Hello, [milkdown](https://saul-mirone.github.io/) Nice to meet you. ';
new Editor({ root, defaultValue }).use(commonmark).create();
Copy the code
At this point use NPM run dev(or yarn dev if you use YARN) and we should see the Milkdown editor in the browser!
In addition to native JS, Milkdown also provides react and VUe3 components out of the box, as well as many official plug-ins.