# 在考虑换一个 markdown parser 了 (September 30, 2024)

之前随着写前端的经验和耐心越来越多，逐渐尝试了不同的 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（毕竟我也没用上它什么插件，如果它性能不好的话，就没必要用它了）

[marked vs markdown-it vs remark vs showdown: Which is Better Markdown Parsing Libraries? (npm-compare.com)](https://npm-compare.com/markdown-it,marked,remark,showdown)

没想到 remark 的 star 数和 download 这么少。一直以为它才是最现代的 best practice 呢

<img src="/nlark/yuque/0/2024/png/26070246/1727703669249-a7c817d6-cc8f-4263-857f-9fcd741d0b6a.png" width="1780" title="" crop="0,0,1,1" id="u5b9f9f2b" class="ne-image">