细谈 MarkMax 和 markdown-it 的异同

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

最近有点纠结,到底 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 联合创始人 乌鲁木齐

推荐标签 标签

  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • 印象笔记
    3 引用 • 16 回帖
  • C++

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

    107 引用 • 153 回帖 • 4 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 531 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    31 引用 • 97 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    181 引用 • 821 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 653 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • OnlyOffice
    4 引用 • 22 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • 反馈

    Communication channel for makers and users.

    126 引用 • 930 回帖 • 273 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 1 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖 • 2 关注
  • Ruby

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

    7 引用 • 31 回帖 • 248 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 38 关注
  • Hprose

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

    9 引用 • 17 回帖 • 628 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 197 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 14 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 828 关注
  • 叶归
    5 引用 • 16 回帖 • 8 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    335 引用 • 324 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    133 引用 • 1124 回帖 • 117 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖