源 / 文/
通过语法实现排版,不需要点选手动设置样式 快速实现复杂内容,如:代码块、超链接、公式等 让创作者有更多时间专注于内容
有一定的学习门槛,对于非程序员不太友好 看原文档就像看“代码”,预览效果需要工具或编辑器支持
https://github.com/Saul-Mirone/milkdown
一、上手
在线尝试:https://milkdown.dev/#/online-demo VS Code 插件:https://marketplace.visualstudio.com/items?itemName=mirone.milkdown
1.1 功能展示
1.2 第一个编辑器
npm i @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord
import { Editor } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord';
import { commonmark } from '@milkdown/preset-commonmark';
Editor
.make()
.use(nord)
.use(commonmark)
.create();
make
来初始化编辑器,然后使用 use
来加载插件,最后使用 create
来创建编辑器。1.3 丰富的插件
二、技术栈
Prosemirror:一个用于在 web 端构建富文本编辑器的工具包 Remark:正确的 Markdown 解析器 TypeScript:以 TypeScript 编写 Emotion:用于构建样式的强大的 css in js 工具 Prism:代码块支持 Katex:高性能的渲染数学公式
三、架构
Markdown <-> Remark AST <-> Prosemirror State <-> UI
四、结语
https://github.com/Saul-Mirone/milkdown
推荐阅读
大学城情侣宾馆花样真多,荷尔蒙的味道!
程序员踩点上下班,被HR约谈,网友:错了吗?
END
顶级程序员:topcoding
做最好的程序员社区:Java后端开发、Python、大数据、AI
一键三连「分享」、「点赞」和「在看」