Introducing Milkdown: A plugin driven WYSIWYG markdown editor

#showdev #javascript #typescript #markdown

Overview

Milkdown is a lightweight but powerful WYSIWYG markdown editor. It's made up by two parts:

A tiny core which provide markdown parser, serializer and kinds of plugin loader.
Lots of plugins provide syntax, commands and components.

With this pattern you can enable or disable any custom syntax you like, such as table, latex and slash commands.
You can even create your own plugin to support your awesome idea.

Features

📝 WYSIWYG Markdown - Write markdown in an elegant way
🎨 Themable - Theme can be shared and used with npm packages
🎮 Hackable - Support your awesome idea by plugin
🦾 Reliable - Built on top of prosemirror and remark
⚡️ Slash & Tooltip - Write fast for everyone, driven by plugin
🧮 Math - LaTeX math equations support, driven by plugin
📊 Table - Table support with fluent ui, driven by plugin

Tech Stack

Milkdown is built on top of these tools:

Prosemirror and it's community - A toolkit for building rich-text editors on the web
Remark and it's community - Markdown parser done right
Postcss - Powerful css tool to build theme
TypeScript - Developed by typescript
Prism - Code snippets support
Katex - LaTex math rendering

First editor

We have some pieces for you to create a very minimal editor:

We use material icon and Roboto Font in our theme.
Make sure to include them for having the best experience.

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

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

const root = document.body;
new Editor({ root }).use(commonmark).create();