👇 今日要闻
打破信息壁垒,走近全球前端。Hello World 大家好,我是林语冰。
Rust 直译为"锈 ",用 Rust 重写其他语言的软件被戏称为"锈化"(Rustify)。
目前,大量前端基建项目都偏爱采用 Rust 重写,追求极致的原生性能,包括:
- GitHub 第一构建工具 Vite 的底层依赖被尤雨溪团队锈化为 Rolldown
- GitHub 第一 UI 库 React 的编译器被 React 团队锈化 了
- Deno 直接采用 Rust,而原本基于 Zig 的 Bun 也开始锈化了
现在,Markdown 生态也进一步锈化了......

satteri 是一个基于 Rust 的 Markdown 引擎,它底层采用了尤雨溪团队的 Oxc 编译器,支持作为 Vite 插件,而且已经渐进式集成到了 Astro 生态。
本期我们就一起来瞄一下这个锈化的 Markdown 引擎有何优缺点,未来能否成为前端基建的超新星~
👉 锈化的 Markdown 引擎
现代 Markdown 引擎一般有两个刚需:
- 既要兼容 CommonMark 标准定义的通用 Markdown 语法,最好也兼容 GitHub 风格的 Markdown(GFM)
- 能够处理 Markdown 扩展语法 MDX,支持在 Markdown 中使用 JSX
satteri 完美满足上述需求,它基于 Rust 进行解析和编译,高性能地处理 Markdown 和 MDX。
对于 MDX 语法,satteri 使用尤雨溪团队的 Oxc 编译器;而对于 CSS 的处理,它采用了 Lightning CSS,这也是 Vite 赞助的一个项目。更重要的是,这些技术栈都是基于 Rust 实现的,所以都能无缝衔接。
目前,基于 JS 的 Markdown 生态拥有丰富的插件,但解析速度较慢;而基于 Rust 的 Markdown 生态则恰恰相反。
satteri 的天才之处在于,它瞄准了这两个生态的中间地带。具体而言,satteri 是一个 Markdown 处理管道,它的解析器和 AST(抽象语法树)使用 Rust 编写,而插件层仍然使用 JS 编写。
这样,开发者仍然可以使用 JS 或 TS 编写转换插件,几乎无需支付跨语言开发的额外成本。
👉 satteri 基本用法
satteri 可以作为 npm 模块开箱即用,只需使用包管理器直接安装,这几种流行方案任选其一:

satteri 的用法和基于 JS 的普通 Markdown 工具库大同小异,但性能更棒。
举个栗子,将一段 Markdown 字符串传递给 markdownToHtml() 函数:

在底层,satteri 将 Markdown 解析成 MDAST(Markdown 抽象语法树),然后将其转换为 HAST(超文本抽象语法树),最后序列化为 HTML。
这样,markdownToHtml() 函数就能把上面的 Markdown 字符串转化返回为对应的 HTML 标签:

此外,satteri 也支持 GitHub 风格的 Markdown 语法和数学公式等,这些配置可以作为 markdownToHtml() 函数的第二个参数传入:

satteri 官方网站提供了一个所见即所得的在线编辑器,如果你启用了 gfm 选项,那么 GitHub 风格的 Markdown 语法都能支持,包括但不限于:

这些 Markdown 都能在在线编辑器正确渲染,可以直观地查看抽象语法树和最终的渲染结果:

👉 和 Vite 一起使用
satteri 还提供了官方 Vite 插件 vite-plugin-satteri,它允许你在 Vite 项目中直接 import Markdown 和 MDX 文件:
- 导入
.md文件会生成渲染后的 HTML 文件 - 导入
.mdx文件会生成 JSX 组件
安装 Vite 插件的方式大同小异,唯一的区别是作为开发依赖安装即可:

注意,安装 Vite 插件之前要先安装 satteri 作为对等依赖。
然后在 Vite 配置文件 vite.config.js 中添加插件:

之后就是见证奇迹的时刻,现在我们可以在项目中导入任一 .md 或 .mdx 文件了。

Vite 插件会处理导入的 .md 文件,返回可用于渲染的 HTML 字符串。
👉 satteri 优缺点
目前,satteri 已经被 Astro 生态渐进式集成,Astro 是 GitHub 前五的 SSG(静态站点生成器)。
Astro 的文档网站框架 Starlight 已经开始采用 satteri,而且 Astro 6.4 也引入了 @astrojs/markdown-satteri,最终目标是将 satteri 作为默认的 Markdown 处理器。

satteri 当前的阻碍是不支持 remark 或 rehype 插件,这是 Markdown 中一个流行的生态,所以相应的功能还需要 satteri 进一步完善。
但是,我个人还是看好 satteri 的未来潜力,毕竟性能这一块出类拔萃,而且贴合 Vite 和 Astro 生态,用户基本盘稳如老狗,对齐生态只是时间问题。如果你想实现一些 Markdown 相关的功能,这个 Rust 神器一定能让你事半功倍。
👇 重点总结
Rust 锈化前端基建的神话还在继续,这一次是 Markdown 生态的 satteri。
satteri 是一个使用 Rust 语言实现的 Markdown 和 MDX 引擎,底层依赖 Oxc 和 Lightning CSS,性能惊人。
satteri 目前已经被 Astro 生态渐进式集成,尚不支持 remark 生态的插件,但值得关注。
👍 以上就是本期《前端日报》的全部内容了,如果读完对你有所帮助,可以按赞打卡、在看推荐或转发分享。
🙏 已经关注我的粉丝们,我们下期再见啦,掰掰~~

👇 参考文献:
- 🔗 satteri 源码仓库 :github.com/bruits/satt...
- 🔗 Vite 插件 :npmx.dev/package/vit...
- 🔗 Astro 集成现状 :astro.build/blog/astro-...