阿拉平平
读完需要
分钟
速读仅需 2 分钟
1. 项目介绍
一个小巧的核心，提供了插件加载器和一些内置插件。
大量的插件，包括语法、命令和组件。
这种模式的好处在于，用户可以根据自己的喜好选择插件，不至于使编辑器变得过于臃肿。Milkdown 可以和 Web 结合使用，本文将记录我使用 Milkdown 的过程。
2. 准备工作
npm init @vitejs/app milkdown-demo --template vanilla-ts项目创建后，根据界面上的提示执行以下命令：
# 进入项目目录
cd milkdown-demo
# 安装依赖包
npm install
# 运行项目
npm run dev项目启动后，访问 http://localhost:3000 查看页面:
3. 使用说明
3.1 添加编辑器
npm install @milkdown/core @milkdown/preset-commonmark @milkdown/theme-nord其中：
@milkdown/core：Milkdown 的核心。
@milkdown/preset-commonmark：官方插件，添加 commonmark 语法支持。
@milkdown/theme-nord：官方主题，提供样式。
将 main.ts 的内容替换为：
import { defaultValueCtx, Editor } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { commonmark } from "@milkdown/preset-commonmark";
import "./style.css";
Editor.make()
.config((ctx) => {
ctx.set(defaultValueCtx, "# Milkdown");
})
.use(nord)
.use(commonmark)
.create();这段代码设置了编辑器的默认值，并使用刚刚安装的插件，显示效果如下：
3.2 使用插件
我们在添加编辑器的时候，其实已经添加了官方的插件，但目前的编辑器功能仍比较简单。接下来，我们继续添加官方插件来扩展编辑器的功能。
@milkdown/preset-gfm：添加 gfm 语法支持，替换之前的 commonmark。
@milkdown/plugin-slash：添加斜线指令，输入 / 使用。
执行以下命令进行安装：
npm install @milkdown/preset-gfm @milkdown/plugin-slash material-icons@latest需要说明的是，这里除了插件，我还安装了最新的 material-icons，否则使用斜线指令时会出现图标不显示的问题。
再次修改 main.ts 文件，代码如下：
import { defaultValueCtx, Editor } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { gfm } from "@milkdown/preset-gfm";
import { slash } from "@milkdown/plugin-slash";
import "./style.css";
import 'material-icons/iconfont/material-icons.css';
Editor.make()
.config((ctx) => {
ctx.set(defaultValueCtx, "# Milkdown");
})
.use(nord)
.use(gfm)
.use(slash)
.create();重启项目，以添加一个任务表为例，Milkdown 的显示效果如下：
4. 写在最后
在这篇文章中，我创建了一个 Web 项目，为其添加了 Milkdown 编辑器，并安装了一些插件来扩展其功能。本文基于 Milkdown 的中文文档[2]，记录我折腾的过程。除了中文文档，官方也提供了在线体验[3]，有兴趣的话可以先去试用下。
References
Milkdown: https://github.com/Saul-Mirone/milkdown 中文文档: https://milkdown.dev/#/zh-hans/getting-started 在线体验: https://milkdown.dev/#/zh-hans/online-demo原文始发于微信公众号（阿拉平平）：Milkdown 折腾手记：为网站添加一个好用的 Markdown 编辑器
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/287546.html
