竞品分析 由 Cross111 贡献

作者： Cross111

对比时间：2024-10-11

来源：https://github.com/Tencent/cherry-markdown/pull/943

题目分析：

1. 有什么竞品
2. 之间的语法能力、功能、安全、性能、扩展能力怎么样？
3. 其他可以比较的点

问题一：有什么竞品

经过筛选，有以下竞品：

1. markdown-here
2. marktext
3. marked

为什么选这三款竞品？

查看了一下市面上关于markdown的产品多如牛毛，有很多成型的笔记应用，如notion，印象笔记，Typora等等，但这些产品难以查看起源码，所以难以分析，不在分析范围内。本次竞品分析的筛选目标是Github上开源且star数极多的项目，证明得到了大多数人的认可，本人猜测可能创新了使用方式亦或是在原有基础上进行了改进。经过我一通筛查，最终选出这三个竞品进行分析，这三个项目的Star数都很大

三款Star数

1. markdown-here → 59.6k
2. marktext → 46.3k
3. marked → 32.7k
4. cherry-markdown → 3.5k

所以挑选出这几款进行分析。

问题二：之间的语法能力、功能、安全、性能、扩展能力怎么样？

在分析这些内容之前，先简单的全面介绍一下这三个产品

项目	概述
markdown-here	Markdown Here 是一个开源工具，它允许您在各种地方快速轻松地创建和编辑 Markdown 文档。借助这款工具，您可以使用熟悉的 Markdown 语法撰写电子邮件、论坛帖子或任何支持富文本格式的内容，然后一键将其转换为 HTML 或其他格式。 Markdown Here 的应用 1. 电子邮件 - 在 Gmail、Yahoo Mail、Outlook 等邮件客户端中轻松撰写格式化的 Markdown 邮件。 2. 论坛 - 在 Reddit、Stack Overflow 或其他讨论板上发布格式清晰、易于阅读的 Markdown 帖子。 3. 博客 - 在 WordPress、Medium 或自定义 CMS 平台上撰写和预览 Markdown 博客文章。 4. 在线文档 - 使用Markdown 编辑在线文档，如 Google Docs、Quip 等。
marktext	是一个轻量级且直观的Markdown编辑器，专为提高写作效率和享受流畅的 Markdown 编辑体验而设计。它的目标是提供一个无干扰的界面，让内容创作者专注于文字本身，而不是复杂的排版和设置。 MarkText 基于 Electron 框架构建，这意味着它是一个跨平台的应用程序，可以在Windows, macOS 和 Linux上运行。Electron 使用 HTML, CSS 和 JavaScript 开发桌面应用，使得开发者能够利用 web 开发的技术栈轻松实现功能。 编辑器的核心特性之一是实时预览，这是通过解析 Markdown 语法并利用浏览器的渲染能力实现的。这种实时同步的方式使用户在编写时能够即时看到效果，无需频繁切换视图。 此外，MarkText 支持 Markdown 扩展如 MathJax（用于数学公式）、Mermaid（流程图和序列图）等，这些都依赖于现代 Web 的库和框架。它还集成了文件系统操作，可以方便地保存、打开和管理本地文件。
marked	是一个高性能 Markdown 解析库，用于将 Markdown 格式的文本转换为 HTML。这款库在 JavaScript 社区中广受好评，不仅因为其出色的效率，还因为它遵循了 Markdown 的原生语法并提供了可定制化的选项 Marked 使用了一种名为"预编译"的方法来提升解析速度，这种方法将解析规则提前处理，使得在实际解析过程中可以快速完成。它基于 CommonJS 规范编写，同时也支持浏览器环境和现代构建工具（如 Webpack 或 Rollup）。 Marked 支持多种常用的 Markdown 扩展，例如表格、代码高亮、脚注等，并且可以根据需要自定义渲染规则。它使用了一种插件系统，允许你通过中间件的方式扩展功能。
cherry-markdown	Cherry-Markdown是由腾讯推出的一款开源、轻量级且高度自定义的在线Markdown编辑器项目。该项目旨在提供一个高效、易用且功能丰富的平台，帮助开发者和写作爱好者提升编写Markdown文档的体验。

大家可以简单对于这三个竞品有一个大致的了解，便于接下来我们分析竞品

---

功能

先说说最直观的功能

通用功能就不赘述了，包括但不限于

• Markdown语法支持：
  • 这四个项目都支持Markdown的基本语法，如标题、段落、列表（无序列表和有序列表）、链接、图片、代码块等
• 代码高亮
  • MarkText、marked（通过扩展或配置）、Cherry-Markdown都支持代码块的语法高亮，使得包含代码的Markdown文档更加易读。Markdown-Here在邮件客户端中也支持代码高亮，但可能需要特定的扩展或配置。
• 跨平台支持：
  • 虽然Markdown-Here作为浏览器扩展，其跨平台性主要体现在浏览器上，但MarkText、marked（作为JavaScript库）、Cherry-Markdown都支持在多种操作系统上运行或使用，体现了Markdown工具的跨平台特性。
• 可定制性（通过不同方式）：
  • 这四个项目都在不同程度上提供了可定制性。例如，MarkText和Cherry-Markdown支持主题定制和插件系统；marked通过配置选项和API扩展实现可定制性；Markdown-Here虽然主要通过浏览器扩展提供功能，但用户也可以通过自定义CSS等方式进行一定程度的定制。

各自功能

项目名称	浏览器扩展	多主题选择	实时预览	快捷键支持	图片粘贴	导出功能
Markdown-Here	√	√	√	√	×	×
MarkText	√	√	√	√	√	√
marked	√	√	√	√	×	×
Cherry-Markdown	√	√	√	√	√	×

专属功能

项目名称	专属
Markdown-Here	1. 邮件客户端集成：Markdown Here的主要特点是它允许用户在各种邮件客户端（如Gmail、Outlook等）中直接编写Markdown格式的邮件，并在发送前将Markdown渲染为美观的HTML格式。这一功能极大地方便了需要在邮件中插入复杂格式或代码的用户。 2. 代码块和TeX公式渲染：Markdown Here支持代码块的语法高亮和TeX公式的渲染，使得包含代码或数学公式的邮件编写变得更加容易和美观。
MarkText	1. 丰富的自定义主题及插件系统：MarkText拥有丰富的自定义主题和插件系统，用户可以根据自己的喜好和需求调整编辑器的外观和功能，提升写作体验。
marked	1. 高性能Markdown解析器：高性能的Markdown解析库，专注于将Markdown格式的文本快速转换为HTML。它采用了**“预编译”方法**来提升解析速度，使得在处理大量Markdown文本时表现出色。 2. 高度可定制：Marked提供了丰富的可定制化选项，用户可以通过中间件扩展功能，根据需求自定义渲染规则，满足多样化的应用场景。
Cherry-Markdown	1. 高度自定义与插件系统：Cherry Markdown同样提供了高度自定义的功能，用户可以通过插件系统添加新的快捷键、修改主题或扩展其他功能。这种灵活性使得Cherry Markdown能够适应不同用户的个性化需求。 2. 增强型Markdown特性：除了标准的Markdown语法外，Cherry Markdown还支持一些增强型特性，如表格、任务列表、流程图、Mermaid图表等，这些特性增强了Markdown文档的表现力和实用性。

---

扩展能力

这四个项目都具有扩展能力，下面逐个进行扩展能力的分析

通用扩展能力

1. 自定义CSS样式
   1. 允许用户通过自定义CSS样式来修改渲染后的HTML内容的外观。这包括字体、颜色、边距、背景等多个方面。用户可以在markdown-here的设置界面中，将自定义的CSS样式复制到“基本渲染CSS”或相应的配置项中。通过这种方式，用户可以根据自己的喜好和需求，调整渲染后的邮件或文档的外观，使其更加符合个人或团队的视觉风格。

扩展能力

项目名称	使用扩展或插件	API
Markdown-Here	×	×
MarkText	√	×
marked	√	×
Cherry-Markdown	×	√

---

语法能力

目前各类markdown的语法规范基本都是参考：

• commonmark 0.31.2
• GFM 0.29-gfm

下面纵向对比一下

项目	语法能力	特点
Markdown-Here	支持基本Markdown语法，允许通过CSS配置外观	浏览器插件，快速将Markdown转换为HTML
Mark Text	支持丰富的Markdown语法，包括GFM和公式渲染	这些特性包括但不限于GFM支持、表格、代码块、数学公式渲染（通过LaTeX语法）、主题和CSS样式自定义等
Marked	支持广泛的Markdown语法，包括原始Markdown、CommonMark和GFM	高性能Markdown解析器和编译器，专为速度优化而设计
Cherry-Markdown	支持标准Markdown语法CommonMark和自定义语法	高度可定制，允许用户定义自己的语法规则

基本都是依托于Commonmark和GFM的，MarkText增加了数学公式渲染，更加方便

---

安全性

针对于markdown有一些通用的安全问题，问题如下

1. 跨站脚本攻击（XSS）：
   • 问题描述：当Markdown内容被转换为HTML并在Web应用中显示时，如果未正确处理HTML标签和JavaScript代码，可能会导致XSS攻击。攻击者可以通过注入恶意脚本，在用户浏览器中执行未授权的代码。
   • 防护措施：使用可靠的Markdown解析器，并在转换过程中对HTML标签和JavaScript进行适当的清理或转义。
2. 不安全的外部资源链接：
   • 问题描述：Markdown文档可能包含外部图像、脚本或其他资源的链接。如果这些资源链接到恶意网站或包含恶意内容，可能会对用户造成危害。
   • 防护措施：仅从可信赖的源加载外部资源，使用内容安全策略（CSP）来限制资源加载的来源。
3. 代码注入：
   • 问题描述：在Markdown编辑器中，如果用户输入的内容被直接嵌入到后端代码或数据库查询中，而未经适当处理，可能会导致代码注入攻击。
   • 防护措施：对用户输入进行严格的验证和清理，避免将未经验证的数据直接用于代码执行或数据库查询

项目名称	问题	防护措施
Markdown-Here	插件权限滥用
与其他插件的冲突	1. 确保插件来源可靠

2. 避免安装未知或未经验证的插件
3. 定期检查插件的更新和安全补丁 | | Mark Text | DOM型XSS漏洞 不安全的HTML粘贴 | 1. 使用最新版本的Mark Text
4. 避免将不受信任的HTML代码粘贴到编辑器中
5. 对HTML内容进行适当的过滤和清理 | | Marked | 进行了RDos安全测试 | 1. 在使用Marked时，结合使用如DOMPurify、sanitize-html等库来清理和转义HTML输出
6. 验证和清理所有外部输入 | | Cherry-Markdown | 自定义语法的安全风险 内置的安全Hook可能不足 | 1. 谨慎使用自定义语法，并确保这些语法得到妥善的处理和验证
7. 定期检查Cherry-Markdown的安全更新和修复
8. 使用额外的安全措施，如内容安全策略（CSP） |

---

性能

性能测试目前正在调研和测试学习阶段，预计9月中旬完成~敬请期待

问题三

1. 其他可以比较的点

发散思维：技术栈，用户体验，社区建设…

用户体验：

针对于用户可能会使用点我进行了总结和体验，从多角度进行了分析，得出以下表格

项目名称	使用场景	界面简洁性	即时预览	学习曲线	交互性
Markdown-Here	浏览器插件，电子邮件、论坛等富文本编辑器	高（通过简单的右键菜单或快捷键操作）	否（需要手动转换）	低（对于熟悉Markdown语法的用户）	流畅（无需离开当前环境）
Mark Text	独立的桌面Markdown编辑器	高（提供多种主题和编辑模式）	是（支持Markdown的即时预览）	低（Markdown语法学习成本低）	优秀（界面友好，操作直观）
Marked	作为库或框架的一部分，用于Web应用	不直接相关（依赖于集成它的应用）	不直接相关（依赖于集成方式）	不直接相关（由开发者决定）	不直接相关（由集成它的应用决定）
Cherry-Markdown	可能的Web编辑器或集成到Web应用	取决于实现和集成方式	可能支持（取决于具体实现）	低至中（取决于自定义语法和功能的复杂性）	取决于集成方式，但通常追求用户友好

---

技术栈：

项目名称	技术栈	备注
Markdown-Here	浏览器扩展（Chrome, Firefox, Opera） JavaScript（主要） CSS	Markdown-Here是一个浏览器扩展，主要用于将Markdown转换为富文本格式，支持多种浏览器平台。它依赖于JavaScript和CSS来实现其功能。
Mark Text	Electron 框架 Vue.js（前端框架）HTML, CSS, JavaScript	Mark Text是一个跨平台的Markdown编辑器，基于Electron框架构建，利用Vue.js进行前端开发，支持Windows、macOS和Linux。
Marked	JavaScript（Node.js）浏览器端也支持	Marked是一个用于解析Markdown的JavaScript库，可以在Node.js环境中使用，也可以在浏览器端通过引入其脚本文件来使用。它专注于Markdown的解析，并不直接提供编辑界面。
Cherry-Markdown	- Vue.js（基于Vue 3）HTML5, CSS3, JavaScript 插件系统（支持扩展）	Cherry Markdown是由腾讯推出的一款开源、轻量级且高度自定义的在线Markdown编辑器，使用Vue.js（基于Vue 3）框架构建，支持现代Web技术如HTML5、CSS3和JavaScript。通过插件系统，用户可以根据需求进行定制。