好奇实时渲染Markdown编辑器的前端实现

如题，我比较好奇黑客说、Vditor（Typora貌似用的是H5封装，也算到里面吧）这样的前端Markdown实时渲染编辑是怎么做的

像格式字符的显示与隐藏，实时渲染等等都具体能如何实现呢

包括我还想知道Markdown解析器怎么做会比较好，网上看有人说用re，但我感觉re的功能没那么强大。或者用AST？

editor·markdown
277 views
Comments
登录后评论
Sign In
·

markdown 的解析有几种方式：

  • AST 比如 remark 的做法（这种自定义能力强）
  • 实时解析 token，回退处理，比如 markdown-it（这种渲染速度快）

hackertalk 用的是 markdown-it 解析的 token 做 AST 封装实现 data 层，对 markdown-it 的源码进行魔改，富文本编辑器实现 view 层，代码高亮用的 prismjs。

不过目前 markdown-it 体验不出快多少，后续版本我可能会自己实现一个 markdown AST，完全控制数据层的逻辑。

富文本编辑器的实现：hackertalk 用的是 prosemirror 实现的，加了一堆自定义插件，改了部分源码，之所以用 prosemirror 是因为这个是目前富文本方案输入层最稳定的，slatejs、 quilljs 有各种问题。