文章目录
- 一,markdownIt模块大致流程
- 二,分析其执行流程
- 三,关于MarkdownIt实例属性
- options配置属性
- validateLink函数
- normalizeLink函数
- normalizeLinkText函数
- configure函数
- set函数
- enable函数
- disable函数
- use函数
- parse函数
- render函数
- parseInline函数
- renderInline函数
- helpers解析链接函数集
- utils工具函数集
因为最近再弄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工具函数集
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)