不想再用 puppeteer 了,我写了个 Markdown 渲染引擎
做过「Markdown → 图片」的,应该都踩过这个坑:
Markdown → HTML → 浏览器 → 截图
然后你就会遇到:
- chromium 很重(部署麻烦)
- 分页不稳定(每次结果都可能不一样)
- 批量渲染性能很差
- serverless 环境基本不好搞 我最近有点受不了这套链路,就自己写了一个: marknative ---
核心思路(和常规方案完全不一样)
不走 HTML,不走 DOM,不走浏览器。
而是:
Markdown → AST → 自定义文档模型 → layout → 分页 → canvas 绘制
简单理解:
把“浏览器排版”这件事,自己实现了一套极简版本(只针对 Markdown)。
---
能干什么?
1. 直接输出 PNG / SVG
import { renderMarkdown } from 'marknative'
const pages = await renderMarkdown('# Hello')
await Bun.write('page-1.png', pages[0].data)
不需要:
- puppeteer
- headless chrome
- 截图 ---
2. 天然支持分页(而且是稳定的)
默认就是:
- 1080 × 1440
- 类似卡片比例 而且分页是 deterministic 的:
- 同一份 Markdown
- 任意环境
- 渲染结果一致 --- ### 3. 适合批量生成内容 比如:
- 小红书卡片
- 技术文章配图
- AI 自动生成内容图 相比 puppeteer:
- 启动更快
- 内存更低
- 更容易横向扩展 --- ## 这个方向值得做
本质上,这类需求其实是:
“结构化文本 → 可控排版 → 图像输出” 但浏览器:
- 太通用(为网页设计)
- 不可控(CSS + layout 太复杂)
- 成本太高 而 Markdown 场景:
- 结构固定
- 可约束
- 非常适合做“专用排版引擎” --- ## 技术点(简单说几个有意思的)
- 用
micromark+mdast做解析- 自己实现 block / inline layout
- 用
skia-canvas直接绘制- layout 和 render 完全解耦 所以理论上可以
- 换 renderer(SVG / PDF / WebGL)
- 做自定义主题系统
- 做可视化编辑器(未来) --- ## 项目地址
👉 https://github.com/liyown/marknative