在此系列文章的第一篇，我们介绍了 Vuepress 如何让 Markdown 支持 Vue 组件的，但没有提到非 Vue 组件的其他部分如何被解析。 今天，我们就来看看 Vuepress 是如何利用 markdown-it 来解析 markdown 代码的。 markdown-…

在所有 Parser 编译生成完 tokens 的时候，就传给 Renderer.render 方法了。我们来看下 Renderer 的定义。它位于 lib/renderer.js。 default_rules 对象存在不同类型的 token 渲染函数。 再来细看 render…

Markdown是一种轻量级标记语言，通过纯文本的方式编写文档，然后再通过工具转化成HTML，PDF，图片等格式，实现Write Once，Read Everywhere的效果。 方便编辑。任何一个文本编辑器就可以编辑，连大家熟悉的Windows记事本也可以。让编写者专注于内容…

在项目文件夹下新建 index.html 文件，布局代码如下，因为真的实在是太简洁了，就不多做解释了。 看到这样写页面的感觉是不是非常怀念，自从会了框架之后，大家多久没写过这样的页面了😭。代码中引入了 css 文件夹中的 index.css 文件和 js 文件夹中的 inde…

我们在 ParserCore 讲到了，经过 ParserCore 处理之后，生成了 type 为 inline 的 token。下一步就是交给 ParserInline 处理。而这个 rule 函数的代码如下： 也就是拿到 type 为 inline 的 token，调用 Pa…

编译的核心管理者，掌握着不同类型的 token 生成的流程。它内部管理了 ParserBlock、ParserInline、linkify、replacements 等 rule 函数。也就是说，用户传入一个字符串，经历了这些 rule 函数处理之后，得到了一个由许多 toke…

之前写过一篇关于代码块渲染添加自定义行号的文章：markdown-it和highlight.js的结合渲染代码，并添加自定义行号 。 不过在之后的渲染使用过程中由于效果不是很好，所以重新改版，并借此机会添加复制代码功能。 本博客采用的后端是 node.js 框架 Express…

markdown-it 是一个 parser。它接收一些字符串，并且经过内部的 rule 函数处理之后，调用 render 之后输出 HTML 字符串。既然是接受字符串，那么如下所见 输入一定格式的字符串给 md，输出 HTML 字符串，只要将其 append 到 DOM Tr…

最近使用 markdown-it 比较多，也开发了一些插件，在这个过程中对源码进行了研读，最终写了这篇文章。需要了解细节的读者可以自行阅读文档。 此文分为两个部分：原理剖析和原理应用（编写插件）。 首先，它会被解析器拿到，经过各个解析规则处理后得到一个 token 流，接着这个…