diff --git a/.husky/test b/.husky/test new file mode 100644 index 000000000..e69de29bb diff --git a/Cherry-Markdown-Mid-level.md b/Cherry-Markdown-Mid-level.md new file mode 100644 index 000000000..a95989683 --- /dev/null +++ b/Cherry-Markdown-Mid-level.md @@ -0,0 +1,202 @@ +# Cherry Markdown 中阶任务 + +# 题目二:**竞品分析** + +分析对比竞品,从语法能力、功能、安全、性能、扩展能力等维度进行对比。其中客观数据(如性能)需要给出运行环境描述。 + +## 题目分析: + +1. 有什么竞品 +2. 之间的语法能力、功能、安全、性能、扩展能力怎么样? +3. 其他可以比较的点 + +### 问题一:有什么竞品 + +经过筛选,有以下竞品: + +1. [**markdown-here**](https://github.com/adam-p/markdown-here) +2. [**marktext**](https://github.com/marktext/marktext) +3. [**marked**](https://github.com/markedjs/marked) + +为什么选这三款竞品? + +查看了一下市面上关于markdown的产品多如牛毛,有很多成型的笔记应用,如notion,印象笔记,Typora等等,但这些产品难以查看起源码,所以难以分析,不在分析范围内。本次竞品分析的筛选目标是Github上开源且star数极多的项目,证明得到了大多数人的认可,本人猜测可能创新了使用方式亦或是在原有基础上进行了改进。经过我一通筛查,最终选出这三个竞品进行分析,这三个项目的Star数都很大 + +**三款Star数** + +1. [**markdown-here](https://github.com/adam-p/markdown-here) → 59.6k** +2. [**marktext](https://github.com/marktext/marktext) → 46.3k** +3. [**marked](https://github.com/markedjs/marked) → 32.7k** +4. [**cherry-markdown](https://github.com/Tencent/cherry-markdown) → 3.5k** + +所以挑选出这几款进行分析。 + +### 问题二:之间的语法能力、功能、安全、性能、扩展能力怎么样? + +在分析这些内容之前,先简单的全面介绍一下这三个产品 + +| [**markdown-here](https://github.com/adam-p/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](https://github.com/marktext/marktext)** | 是一个轻量级且直观的Markdown编辑器,专为提高写作效率和享受流畅的 Markdown 编辑体验而设计。它的目标是提供一个无干扰的界面,让内容创作者专注于文字本身,而不是复杂的排版和设置。 + +MarkText 基于 Electron 框架构建,这意味着它是一个跨平台的应用程序,可以在Windows, macOS 和 Linux上运行。Electron 使用 HTML, CSS 和 JavaScript 开发桌面应用,使得开发者能够利用 web 开发的技术栈轻松实现功能。 +编辑器的核心特性之一是实时预览,这是通过解析 Markdown 语法并利用浏览器的渲染能力实现的。这种实时同步的方式使用户在编写时能够即时看到效果,无需频繁切换视图。 +此外,MarkText 支持 Markdown 扩展如 MathJax(用于数学公式)、Mermaid(流程图和序列图)等,这些都依赖于现代 Web 的库和框架。它还集成了文件系统操作,可以方便地保存、打开和管理本地文件。 | +| [**marked**](https://github.com/markedjs/marked) | 是一个高性能 Markdown 解析库,用于将 Markdown 格式的文本转换为 HTML。这款库在 JavaScript 社区中广受好评,不仅因为其出色的效率,还因为它遵循了 Markdown 的原生语法并提供了可定制化的选项 + +Marked 使用了一种名为"预编译"的方法来提升解析速度,这种方法将解析规则提前处理,使得在实际解析过程中可以快速完成。它基于 CommonJS 规范编写,同时也支持浏览器环境和现代构建工具(如 Webpack 或 Rollup)。 +Marked 支持多种常用的 Markdown 扩展,例如表格、代码高亮、脚注等,并且可以根据需要自定义渲染规则。它使用了一种插件系统,允许你通过中间件的方式扩展功能。 | +| [**cherry-markdown**](https://github.com/Tencent/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](https://spec.commonmark.org/0.31.2/) +- [GFM 0.29-gfm](https://github.github.com/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 +2. 避免将不受信任的HTML代码粘贴到编辑器中 +3. 对HTML内容进行适当的过滤和清理 | +| Marked | 进行了RDos安全测试 | 1. 在使用Marked时,结合使用如DOMPurify、sanitize-html等库来清理和转义HTML输出 +2. 验证和清理所有外部输入 | +| Cherry-Markdown | 自定义语法的安全风险 +内置的安全Hook可能不足 | 1. 谨慎使用自定义语法,并确保这些语法得到妥善的处理和验证 +2. 定期检查Cherry-Markdown的安全更新和修复 +3. 使用额外的安全措施,如内容安全策略(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。通过插件系统,用户可以根据需求进行定制。 | \ No newline at end of file diff --git "a/CommonMark\350\257\255\346\263\225\350\247\243\346\236\220.md" "b/CommonMark\350\257\255\346\263\225\350\247\243\346\236\220.md" new file mode 100644 index 000000000..20e37f4fb --- /dev/null +++ "b/CommonMark\350\257\255\346\263\225\350\247\243\346\236\220.md" @@ -0,0 +1,39 @@ +研究CommonMark规范,完善Cherry Markdown行内语法hook(sentence hook)以支持更多CommonMark语法特性,并增加通过10个单测用例。 + +## 题目细分: + +1. 研究**CommonMark规范** +2. 完善**CherryMarkdown行内语法hook**→支持更多CommonMark语法特性 +3. 增加10个单测用例 + +### 具体分析1:研究**CommonMark规范** + +根据readme里面的内容,可以看到CommonMark规范及测试用例https://spec.commonmark.org/ + +网站内最新的test cases是24年1月28号的,版本为0.31.2,具体研究这一份规范 + +同时网站内还有其他功能,discussion forum(已失效)、dingus互动(在线互动)、changelog等等 + +CommonMark 是 Markdown 语法的合理化版本,具有[规范](https://spec.commonmark.org/)和用 C 和 JavaScript 编写的 BSD 许可参考实现。 + +https://spec.commonmark.org/0.31.2/ 包含了markdown语法的实现规则 + +这里有点混淆了 markdown,commonmark,cherrymarkdown三者之间的关系和联系。理清楚了一下。 + +### **一、Markdown** + +Markdown是一种轻量级标记语言,由约翰·格鲁伯(John Gruber)在2004年创造,并与亚伦·斯沃茨(Aaron Swartz)共同合作完善其语法。Markdown的核心理念是使用易于阅读、易于撰写的纯文本格式,并可选择性地转换成有效的XHTML或HTML。它吸收了电子邮件中纯文本标记的特性,并设计成直观易用的文本格式。Markdown广泛用于各种网站和平台,如GitHub、Reddit、WordPress等,成为撰写帮助文档、论坛消息、电子书等的流行选择。 + +### **二、CommonMark** + +CommonMark是对Markdown语法的标准化尝试,旨在解决Markdown不同实现之间的不一致性问题。它定义了一套明确的语法规则,包括块级元素(如段落、标题、列表)和内联元素(如链接、强调、代码)等,以确保Markdown文档在不同平台和编辑器上的一致性和可预测性。CommonMark是一个规范,不是一个具体的实现,但它为Markdown的标准化提供了基础。 + +### **三、CherryMark** + +CherryMark是由腾讯推出的一款开源、轻量级且高度自定义的在线Markdown编辑器。Cherry Markdown使用现代Web技术构建,如HTML5、CSS3和JavaScript(基于Vue.js框架),提供了实时预览、代码块语法高亮、插件系统等丰富功能,旨在提升开发者和写作爱好者编写Markdown文档的体验。Cherry Markdown是Markdown的一个具体应用或工具,遵循Markdown(及CommonMark)语法规范。 + +### **四、关系和区别** + +- **Markdown** 是基础,定义了轻量级标记语言的核心概念和语法。 +- **CommonMark** 是对Markdown语法的标准化,旨在解决不同实现间的兼容性问题。 +- **CherryMark** 是Markdown的一个具体应用工具,提供了丰富的编辑功能和用户体验优化,可能遵循Markdown或CommonMark规范。 diff --git a/src/core/hooks/Emphasis.js b/src/core/hooks/Emphasis.js index f6bc784d6..67506acae 100644 --- a/src/core/hooks/Emphasis.js +++ b/src/core/hooks/Emphasis.js @@ -94,7 +94,8 @@ export default class Emphasis extends SyntaxBase { return allowWhitespace ? ALLOW_WHITESPACE_MULTILINE : `(${char}|${char}(.*?(\n${char}.*)*)${char})`; }; const asterisk = { - begin: '(^|[^\\\\])([*]+)', // ?, ? + begin: '(^|[^\\\\])(\\*+)(?!\\*)', // ?, ? + // 防止连续星号:改后的正则表达式不允许捕获的星号序列后紧跟另一个星号 content: `(${emRegexp(allowWhitespace, '*')})`, // ? end: '\\2', }; diff --git a/src/core/hooks/Header.js b/src/core/hooks/Header.js index 408d8fd10..f8e5c06a7 100644 --- a/src/core/hooks/Header.js +++ b/src/core/hooks/Header.js @@ -222,7 +222,7 @@ export default class Header extends ParagraphBase { // atx header const atx = { - begin: '(?:^|\\n)(\\n*)(?:\\h*(#{1,6}))', // (?\\n*), (?#{1,6}) + begin: '(?:^|\\n)(\\n*)(?:\\h{0,}(#{1,6})(?:\\s+|$))', // (?\\n*), (?#{1,6}) content: '(.+?)', // '(?.+?)' end: '(?=$|\\n)', };