markdownIt大致流程分析

因为最近再弄markdown在react与vue的渲染，发现其都引用了markdownIt模块。
于是就产生了这篇文章

一，markdownIt模块大致流程

二，分析其执行流程

1，入口函数MarkdownIt.render

• 数据源从此函数开始颠沛流离的一生

2，实例化Core解析器

3，流经相应解析规则

• 默认流经，normalize（用于文档标准化），block：把文档解析成对应块级，inline：处理解析后块级中的内联文档，linkify（用链接节点替换类似链接的文本），replacements（替换相关字符），smartquotes（替换相关字符），六条内置解析规则
• 其中，linkify，replacements，smartquotes解析规则，受MarkdownIt.options配置属性所影响，默认不流经这几种解析规则

3.1，流经block解析规则

• 实例化block解析器
• 此解析器，对其数据源，按照每行（以换行符为基准），对数据源进行拆分并对其关键信息进行记录
• 此后依次流向此解析器下的十一条子规则，并形成token流

• 关于token流，官方解释是：
  Tokens 是一个简单的数组。（AST 是一个对象）
  打开的标签和关闭的标签可以隔离。
  将“内联容器(inline container)”作为一种特殊的 block token 对象。它有嵌套的 tokens，如粗体，斜体，文本等等。

3.2，流经inline解析规则

• 实例化inline解析器
• 从上述的tokens中对token.type为inline的token使用此解析器下的十五条子规则进行处理

4，流经渲染器

• 经过长途跋涉后，终于完善token流，此时需要对token流进行包装，使我们能清晰看出来他的内容
• 此渲染器，内置九条渲染规则（围栏、行内代码、代码块、html 块、行内 html、图片、硬换行、软换行、文本），token流依次流经后，最终渲染成html结构

三，关于MarkdownIt实例属性

options配置属性

​ 默认配置：

配置路径（基于/lib下的相对路径）
./presets/default（在没有给出预设名称时会启用，（包括）所有可用的规则）
./presets/zero（所有的规则都被禁用）
./presets/commonmark（将解析器配置为严格的 CommonMark模式）

validateLink函数

​ 验证链接：parame：url：string，return：boolean

验证规则
/^(vbscript|javascript|file|data): /
/^data:image/(gif|png|jpeg|webp);/

normalizeLink函数

​ 1，markdown-it解析器的URL实用程序。（使用mdurl模块进行url解析）

​ 2，国际化域名编码。（使用punycode模块进行域名编码）

​ 标准化链接 ：parame：url：string，return：string

---

normalizeLinkText函数

​ 1，markdown-it解析器的URL实用程序。（使用mdurl模块进行url解析）

​ 2，国际化域名编码。（使用punycode模块进行域名编码）

​ 标准化链接 ：parame：url：string，return：string

---

configure函数

​ 1，MarkdownIt.set函数进行配置属性的合并。（默认配置参考config）

​ 2，启用规则

​ 对MarkdownIt进行配置：parame：presets: object，return：MarkdownIt

---

set函数

​ 合并解析器属性：parame：options：object，return：MarkdownIt

---

enable函数

• list (String|Array) – 要启用的规则名称或规则名称列表。
• ignoreInvalid (Boolean) – 设为 true 来忽略规则未发现时的错误。

​ 启用规则：parame：list：array， ignoreInvalid：boolean，return：MarkdownIt

---

disable函数

• list (String|Array) – 要禁用的规则名称或规则名称列表。
• ignoreInvalid (Boolean) – 设为 true 来忽略规则未发现时的错误。

​ 禁用规则：parame：list：array，ignoreInvalid：boolean，return MarkdownIt

---

use函数

​ 注入插件：parame：plugin：function，（arguments？），return：MarkdownIt

---

parse函数

​ 1，实例化Core类 => StateCore类

​ 2，通过Core.process函数对StateCore实例进行处理

​ 解析文档：parame：src：string，env：object，return：array（tokens流）

---

render函数

​ 1，通过MarkdownIt.parse函数解析文档

​ 2，通过renderer.render函数对解析后的文档进行渲染

​ 渲染文档：parame：src：string，env：object，return：string

---

parseInline函数

​ 1，实例化Core类 => StateCore类

​ 2，修改StateCore.inlineMode为True

​ 3，通过Core.process函数对StateCore实例进行处理

​ 解析内联元素：parame：src：string，env：object，return：array（tokens流）

---

renderInline函数

​ 1，通过MarkdownIt.parse函数解析文档

​ 2，通过renderer.render函数对解析后的文档进行渲染

​ 渲染内联文档：parame：src：string，env：object，return：string

---

helpers解析链接函数集

utils工具函数集