细谈 MarkMax 和 markdown-it 的异同

本贴最后更新于 935 天前,其中的信息可能已经渤澥桑田

最近有点纠结,到底 MarkMax 自定义插件呢?还是 100% 支持 markdown-it 的插件?MarkMax 现在是实验性支持了 markdown-it 的部分插件,因为 MarkMax 的渲染器参数与 markdown-it 有差别,并且 MarkMax 的渲染机制与 markdown-it 同样有差别,所以对于 markdown-it 插件的支持程度需要进行源码级评估。需要注意的是,markdown-it 的插件不会支持 MarkMax 的运行时设计,这也意味着无法支持 MarkMax 的运行时性能优化和新的特性。

我深入思考之后觉得 markdown-it 的插件具有参考意义,但不意味着 MarkMax 将会 100% 支持其插件,所以开始着手设计工程级的 MarkMax 插件开发。因为 markdown-it 插件是存在设计缺陷的,具体表现在无法解决 rules 键存在冲突的问题,例如:默认类型为 text 的节点,我有多个插件修改同一个 text 的规则,就会导致渲染函数冲突,这对于任何一个插件设计机制来说都是有挑战性的。

当然,那些框架把决定权踢给了用户,比如 docsify。docsify 插件对我来说就是尤其失败的设计,我给社区开源了好几个 docsify 插件,这些插件通过 cdn 统计至少有数万的网站正在使用。也因为 docsify 失败的插件设计,导致了用户踢 issues 我还得去解释和进行适配,非常的恼火。

所以 MarkMax 插件设计除了借鉴了我自己对于 Vditor 的插件设计之外,将会针对 markdown-it 原理进行定制设计。先谈 MarkMax 究竟是如何支持 markdown-it 插件的吧,说起来其实非常简单,通过包装器进行实现的。因为 markdown-it 对于 markdown 文件 parse 之后的结果,一般都是 HTML 标签或其组成部分,所以 MarkMax 将这些渲染函数通过 MarkdownItWrapper 包装转化为 VNode,然后交给 MarkMax 的“清洗工”进行处理。理论上来说,此机制同样可以实现对于 Vditor Plugin 的支持,但是 MarkMax 已经计划移除其中所有的代码了。

MarkMax 的 Washer 其实是个非常有意思的设计,这个不光会“洗掉”不必要的节点生成,还把 markdown-it 的队列转化为了 VNode 树结构,实现详情可以参考源码,我是通过栈这一数据结构进行实现数据结构转化的。MarkMax 渲染器与 markdown-it 最大的差别在于 markdown-it 的输出是字符串,而 MarkMax 的输出是虚拟节点。MarkMax 虽然是参考 markdown-it 渲染器的重写,但因针对 VNode 映射 DOM 节点原理的不同,这也导致了有些方法的实现是有差异的。

到目前为止,说 MarkMax 是对于 markdown-it 的套壳毫不为过,但是对于新的插件设计机制和利用 vdom 而提供新的特性则与 markdown-it 差异会越来越大。MarkMax 是综合了我这么多年来对于 markdown 解析器、markdown 编辑器、markdown 渲染器、Vditor 插件和运行时设计、markdown-it、lute、marked.js 二次开发等等经验的产物,可能直到目前它的设计并不完美,但是一定会是更有特色的。

MarkMax 将会持续发挥 vdom 的特点。在首次渲染上,其渲染性能达不到基于字符串模板的方案,性能会稍微差一些(但是总体差距并不大)。但 MarkMax 将会提供 diff 的特性,降低 DOM 节点大量修改带来的性能损耗,针对于可能会引入编辑器的场景,MarkMax 将会采取更小粒度的节点修改。除此之外,MarkMax 会去实现版本比较的特性。普通的撤销和编辑虽然可以做到每一处修改历史记录的操作,但并不会主动去做到对于文字多次修改的历史版本保存。这个意义差距还是蛮大的,并且有望实现渲染器进行类似于 diff 的版本可视化修改比较。

MarkMax 是基于 markdown-it 和 million 的产物,在富文本编辑这块大概会引入 wangEditor 作为富文本编辑器进行定制开发。正如 MarkMax 在简介里所说的,MarkMax 是在 Web 端的一个新的 markdown 解决方案。市面上的 markdown 方案千千万万,此项目只是为了满足我设想高性能 markdown 方案实现的个人主义产物。

如果你对此项目感兴趣,可以提出参考意见或者参与开发,路过也欢迎给个 Star~

项目地址:https://github.com/HerbertHe/markmax

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • HerbertHe

    不算是吧。。。因为我觉得 Vditor 的工程实在是太大了,而且敏捷度不够,有些东西是很难实现的。

    MarkMax 通过 millionjs 提供了 VDOM 的特性,几乎实现了原生性能下的 markdown 渲染。体积远小于 Lute,重写了 markdown-it 的 renderer(这就导致了不支持 markdown-it 所有的插件)。不过还是蛮简单兼容了大部分 markdown-it 的插件,也可以兼容之前对于 Vditor 的插件设计,而且也提供了生命周期之类的特性 emmmm 当然也去解决 markdown-it 可能存在的 rules 冲突的问题,我感觉 docsify 等等的插件设计都存在这个问题

    设计之初还是为了解决渲染的问题,后来给 million 的反馈比较多,成了 collaborator。后来我发现玩法还可以更多,因为可以直接生成 VNode Tree,MarkMax 又可以拥有 million 所有的特性,包括兼容 Vite、使用 million/react 等等,非常的有趣。

    我有蛮多想法的,但是在准备研究生考试,所以未来一年都不打算更新代码了。PR Welcome~

  • 其他回帖
  • CheGuevara

    又来开新坑了吗trollface

    1 回复
HerbertHe
主营前端, 热衷于造轮子 ~ 现为西部计划服务新疆专项志愿者~ Nuco.Tech Studio 联合创始人 乌鲁木齐

推荐标签 标签

  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    126 引用 • 169 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 364 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 486 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 6 关注
  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 632 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖 • 1 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 216 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 17 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    288 引用 • 4485 回帖 • 663 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 4 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 创业

    你比 99% 的人都优秀么?

    85 引用 • 1399 回帖 • 1 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 2 关注