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

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

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

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

editor·markdown
213 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 有各种问题。