鸿运通网站建设怎么样,制作宣传图片的软件app,新冠疫苗接种查询,眼查看网站开发语言前言最近使用 markdown-it 比较多#xff0c;也开发了一些插件#xff0c;在这个过程中对源码进行了研读#xff0c;最终写了这篇文章。需要了解细节的读者可以自行阅读文档。此文分为两个部分#xff1a;原理剖析和原理应用#xff08;编写插件#xff09;。markdown-it…前言最近使用 markdown-it 比较多也开发了一些插件在这个过程中对源码进行了研读最终写了这篇文章。需要了解细节的读者可以自行阅读文档。此文分为两个部分原理剖析和原理应用编写插件。markdown-it 原理输入一串 markdown 代码最后得到一串 html 代码整体流程如下我们以一个简单的例子来解释整个流程# 我是一个例子 - h1我是一个例子/h1首先它会被解析器拿到经过各个解析规则处理后得到一个 token 流接着这个 token 流被渲染器拿到经过各个渲染规则处理后逐步拼接成一个 html 字符串。解析器markdown-it 内置了七个核心规则在上图我对解析规则使用了虚线因为它们是可以被启用/禁用的。我们这篇文章只来聊聊最核心的两个规则block 和 inline。规范指出我们可以将一篇 Markdown 文档视为一系列块块是一种结构化的元素如段落块引用列表标题规则和代码块。一些块如块引号和列表项可以包含其他块; 其他如标题和段落包含内联内容如文本链接强调文本图像行内代码等。块结构的解析优先级始终高于内联结构。这意味着解析可以分两步进行1.识别 markdown 文档的块结构;2.将段落标题和其他块结构中的文本行作为内联结构解析。注意第一步需要按顺序处理行但第二步可以并行化因为一个块元素的内联解析不会影响任何其他块的内联解析。块分为两种类型容器块和叶子块容器块可以包含其他块但叶子块不能包含其他块。具体解析时会围绕着 line 和 character 两个维度来解析。对于每一行来说解释的结果有以下三种用来关闭一个或多个块结构。用来创建一个或多个新块结构作为最后打开的块结构的子节点。可以将文本添加到树上剩余的最后最深的打开的块结构上。对于我们这个例子会先创建一个 heading 块然后将文本内容添加到这个块上。下一行没有内容于是块关闭。字符包括非空白字符和空格(U0020)制表符 (U0009)换行符(U000A)行列表U000B换页U000C或回车U000D这些空白字符。这里我们不做展开。这期间会接触到的规则有 block、inline、heading、text。block 规则会用来解析 # 我是一个例子先进入 tokenize 函数内含十一个 block 规则。heading 规则得到 heading_open 、inline、 heading_close 三个 tokeninline 规则会用来解析 我是一个例子先进入 parse 函数内含四个 inline 规则text 规则得到 text 的 token解析完毕我们得到了 3 1 个 tokentoken 流这里我们得到的结果不是一颗 AST 树而是一个数组markdown-it 称之为 token 流。为什么呢官方解释是Tokens 是一个简单的数组。AST 是一个对象打开的标签和关闭的标签可以隔离。将“内联容器(inline container)”作为一种特殊的 block token 对象。它有嵌套的 tokens如粗体斜体文本等等。这样做有什么好处呢这样就可以并行处理 block 和 inline 类型的 token 了。生成 token 流后它们就被会传递给 renderer。渲染器它会遍历所有 token将每个 token 传递给与 token 的 type 属性同名的规则。markdown-it 内置了九种规则围栏、行内代码、代码块、html 块、行内 html、图片、硬换行、软换行、文本。type 属性不在内置规则的 token 将会被被传入 renderToken 中当一个普通 token 处理这里不作展开。回到我们的例子中来heading_open 会被渲染成 h1inline 中的 text 会被渲染成 我是一个例子heading_close 会被渲染成 /h1markdown-it 插件一些 markdown-it 插件就利用了上述的原理。markdown-it-container这个插件可以让你支持内容块比如 vuepress 的内容块这是如何实现的呢我们可以根据之前的介绍推测一个内容块的 token 流第一行和第三行有 block 型的 token一个代表 open一个代表 close。第二行是 inline 型的 token其中的内容是 inline 型的。由于内容块中是 inline 类型所以围栏、行内代码、代码块、html 块、行内 html、图片、硬换行、软换行、文本都是支持的。实际上我们会逐行扫描找到匹配 ::: tip 这样的内容块语法将它作为一个块结构开始进行解析直到有 ::: 的行结束。其中的每一行都将解析为 paragraph_open、inline、paragraph_close。解析后的 token 流最后分别渲染 div 、若干 p 标签、 /div。markdown-it-anchor这个插件可以对标题进行锚点抽取以便阅读文档时能快速定位位置。这里也可以推测一下是不是往原本是 heading_open type 的 token 之前插入了一个 token 呢这个 token 渲染出来就是锚点。实际上的确是插入了 token但不止一个因为锚点是可点击的所以实际上是一个 a 链接也就是 link_open、inline、link_close 三个 token。而且也不是插入在 heading_open 之前而是 heading_open 和 heading_close 之间的 inline 子元素里了因为 # 是和 Markdown 语法平级的。注意事项1.因为标题可能是#$等特殊字符会造成 url 哈希无效所以需要对锚点的哈希值转义。2.可能会出现重名的标题所以需要对哈希进行标记给链接添加属性官方有一个写插件的例子添加 target_blank 属性到所有链接。有两种方式修改渲染器规则// 如果覆盖或者是对默认渲染器的代理则记住老的渲染器。
var defaultRender md.renderer.rules.link_open || function(tokens, idx, options, env, self) {return self.renderToken(tokens, idx, options);
};md.renderer.rules.link_open function (tokens, idx, options, env, self) {// 如果你确认其他的插件不能添加 target - 放弃以下检查var aIndex tokens[idx].attrIndex(target);if (aIndex 0) {tokens[idx].attrPush([target, _blank]); // 添加新属性} else {tokens[idx].attrs[aIndex][1] _blank; // 替换已经存在的属性值}// 传递 token 到默认的渲染器。return defaultRender(tokens, idx, options, env, self);
};
修改 tokenvar iterator require(markdown-it-for-inline);var md require(markdown-it)().use(iterator, url_new_win, link_open, function (tokens, idx) {var aIndex tokens[idx].attrIndex(target);if (aIndex 0) {tokens[idx].attrPush([target, _blank]);} else {tokens[idx].attrs[aIndex][1] _blank;}});
结语markdown-it 作为一款经典的 js 解析 markdown 的库其中思想和设计都可以细细揣摩回味久久。
