如何写一个markdown-it插件（一）

前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果可以查看：TypeScript中文文档。在搭建博客的过程中，我们针对实际需要在《VuePress 博客优化之拓展 Markdown 语法》中讲解了如何编写markdown-it插件，在《markdown-it 原理解析》中讲解了markdown-it的执行原理。在这篇文章中，我们将详细讲解实战代码，帮助大家更好的编写插件。renderermarkdown-it的渲染过程分为两部分，Parse和Render。如果我们要改变渲染效果，比如在外层包裹一个div，或者修改HTML元素的属性，添加类等，我们可以从Render流程入手。可以在markdown-it的官方文档：Renderer实例中找到自定义Render渲染规则的方法。用它来修改输出外观。或者为新的令牌类型添加渲染规则，由plugins.varmd=require('markdown-it')();functionmyToken(tokens,idx,options,env,self){//...returnresult;};md.renderer.rules['my_token']=myTokenmarkdown-它有一些内置的默认规则，你可以直接修改它们，具体细节和渲染方式可以查看renderer.js的源码，直接列出此处：code_inlinecode_blockfenceimagehardbreaksoftbreaktexthtml_blockhtml_inline示例1我们查看VuePress中代码块的渲染结果，会发现每个代码块每一层都包裹着一层extra-class类名的div：其实这是VuePress修改生成的渲染规则。查看VuePress的源码：module.exports=md=>{constfence=md.renderer.rules.fencemd.renderer.rules.fence=(...args)=>{const[tokens,idx]=argsconsttoken=tokens[idx]constrawCode=fence(...args)return``+`${rawCode}