之前随着写前端的经验和耐心越来越多,逐渐尝试了不同的 markdown renderer:
- 语雀 blog 这边用的是 markdownit + highlight.js(前段时间后者改成 shiki 了)
- Free Chat 用的是原项目的 markdownit + highlight.js(但是是同步的)
- Anse 用的是 remark-rehype + rehype-prism,现在想来怪不得慢!感觉掉帧的阈值比 Free Chat 这边低一些
- Promplate Docs 用的是 remark-rehype + shiki + mdsvex,由于用了 mdsvex 所以其实是渲染出 svelte 模板了,理论上灵活性最大,但既没有 markdown 的 lint 也没有 svelte 的自动补全,所以其实不太好用。更重要的是,在 Generative UI 的时代,mdsvex 这种不能流式渲染的就有硬伤了(除非接受 svelte 编译器在 runtime 运行)
- Pythonline 用到是 remark-parse 然后手动从 ast 渲染到 HTML,这使得有几乎足够的自定义性,可以让一些元素(inline或block的代码)具有一些响应性,另外这样不会重复修改 DOM,性能极大程度上提高了,这下基本上只有 parse 的 cost 了
自从尝试过从 AST 渲染到组件,就打算把它迁移到 Free Chat(毕竟这个项目我天天得用,有时候掉帧还是很烦的),突然想到,每种 markdown parser / renderer 肯定都可以拿到 AST 啊,何必用 remark-parse(毕竟我也没用上它什么插件,如果它性能不好的话,就没必要用它了)
没想到 remark 的 star 数和 download 这么少。一直以为它才是最现代的 best practice 呢