markdown-it 是一个 markdown 解析器，并且易于拓展。其演示地址为：https://markdown-it.github.io/ markdown-it 具有以下几个优势：遵循 CommonMark spec 并且添加了语法拓展和语法糖（如URL 自动识别，针对印刷做了特殊处理）可配置语法，你可以添加新的规则或者替换掉现有的规则快默认安全社区有很多的插件或者...
自定义 Rules 至此,我们对 markdown-it 的渲染原理进行了简单的了解,无论是 Parse 还是 Render 过程中的 Rules,markdown-it 都提供了方法可以自定义这些 Rules,这些也是写 markdown-it 插件的关键,这些后续我们会讲到。 系列文章 博客搭建系列是我至今写的唯一一个偏实战的系列教程,讲解如何使用 VuePress 搭建博客...
首先,它会被解析器拿到,经过各个解析规则处理后得到一个 token 流,接着这个 token 流被渲染器拿到,经过各个渲染规则处理后逐步拼接成一个 html 字符串。 解析器 markdown-it 内置了七个核心规则,在上图我对解析规则使用了虚线,因为它们是可以被启用/禁用的。我们这篇文章只来聊聊最核心的两个规则:block 和 inl...
Markdown-it的工作原理可以分为两大部分:解析器和渲染器。 解析器 解析器是Markdown-it的第一步工作,它的任务是将输入的Markdown代码转换为token流。这个过程涉及词法分析和语法分析,解析器会识别出Markdown代码中的不同元素,如标题、段落、列表、代码块等,并将它们转换为相应的token。 token流是一个数组,每个元...
其演示地址为： markdown-it.github.io/ markdown-it具有以下几个优势：使用源码解析 我们查看markdown-it 的 入口代码，可以发现其代码逻辑清晰明了：从render方法中也可以看出，其渲染分为两个过程：跟 Babel 很像，不过 Babel 是转换为抽象语法树（AST），而markdown-it 没有选择使用 AST，主要是...
在搭建博客的过程中,我们出于实际的需求,在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何写一个markdown-it插件,又在《markdown-it 原理解析》中讲解了markdown-it的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。 renderer
在搭建博客的过程中,我们出于实际的需求,在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何写一个markdown-it插件,又在《markdown-it 原理解析》中讲解了markdown-it的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。 Parse markdown-it的渲染过程分为两部分,Parse和Render,如果我们要实现...
Markdown-it 原理解析 简介:「这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战」。 「这是我参与2022首次更文挑战的第2天,活动详情查看:2022首次更文挑战」。 前言 在《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文...
在搭建博客的过程中,我们出于实际的需求,在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何写一个markdown-it插件,又在《markdown-it 原理解析》中讲解了markdown-it的执行原理,本篇我们将讲解具体的实战代码,帮助大家更好的写插件。 Parse markdown-it的渲染过程分为两部分,Parse和Render,如果我们要实现...
原理解析 fence 拓展 exportdefault(md) => {constfence = md.renderer.rules.fence; md.renderer.rules.fence=(...args) =>{const[tokens, idx, options, , self] = args;consttoken = tokens[idx]; /src/index.js?#L7-L11 markdown-it 的拓展是通过重写md.renderer.rules.fence来实现对 fence的重新...