Introducing Milkdown: A plugin driven WYSIWYG markdown editor
Mirone
Posted on July 8, 2021
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.
Links
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();
For further information, please visit our website.
💖 💪 🙅 🚩
Mirone
Posted on July 8, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.