记一次为markdown-it添加echart支持

最近碰到一个需求，在vue项目中把markdown渲染成网页展示，并且支持图表展示。markdown的渲染好说，使用markdown-it即可。数据图表就棘手了。常见的图表展示就是用的echart，而且echart以前用过，好上手。但是在markdown-it里面展示出来我就没试过了。在markdown-it的插件中找到两个插件：
![](/api/file/getImage?fileId=60f8051f2fc01e1b6d002bb6)
但是一个会报错，一个渲染不出来。。。

没办法，只能自己动手了。

不过各种echart的插件的用法还是能参考一下的，其实是将特定语言的代码块修改渲染方式就对了，代码块内容即option结构体。例如这样

```
    ```echarts
    {
        "title": {
            "text": "第一个 ECharts 实例"
        },
        "tooltip": {},
        "legend": {
            "data":["小红", "小明", "小黑"]
        },
        "xAxis": {
            "data": ["语文","数学","英语"]
        },
        "yAxis": {},
        "series": [
        {
            "name": "小红",
            "type": "bar",
            "data": [45, 15, 32]
        },
        {
            "name": "小明",
            "type": "bar",
            "data": [44, 14, 33]
        },
        {
            "name": "小黑",
            "type": "bar",
            "data": [38, 10, 35]
        }
        ]
    }
    ```
```

也就是说我只要能找到是哪里将代码块渲染成`<pre><code></code></pre>`就行

然后我点开了markdown-it的[文档](https://markdown-it.docschina.org/)，emmmm，只是使用说明。。。这个界面上还有个[开发者建议](https://markdown-it.docschina.org/development.html)

![](/api/file/getImage?fileId=60f8051f2fc01e1b6d002bb7)

emmmmm，第一个是Github页面，第二个是markdown-it的[文档](https://markdown-it.docschina.org/)。。。第三个能不能放显眼一点的地方，而且我就想替换一下某些代码块的展示方式，也不想完整的整一个插件，就没有简单一点的办法吗。。。

于是继续找了找。。。还好有大佬做图，参考文章：[markdown-it源码分析6-Renderer](https://juejin.cn/post/6844903921563992078#heading-1)

![](/api/file/getImage?fileId=60f8051f2fc01e1b6d002bb8)

也就是说，如果只是简单的修改，修改renderer就行。

我继续快速翻了翻上面大佬的系列文章，找到一个合适的[例子](https://juejin.cn/post/6844904196785831944#heading-7)

简单来讲markdown-it().use()的时候传进去的插件其实是个大函数，这个函数接受一个参数，整个markdown-it的内部数据结构，作为参数传进去，可以任意修改。而将renderer中的某些rule替换一下，最后生成的html就变了。

也就是这样
```javascript
markdownit().use(function(md){
    // 重写code_inline 渲染方法
  md.renderer.rules.code_inline = function (tokens, idx, options, env, slf) {
  }
})
```

其中code_line会把接收tokens，和一个单行代码的token在tokens的下标。（token是什么，依然参考`滴滴前端技术`的[文章](https://juejin.cn/post/6844903921555619847#heading-1)）
根据tokens[idx]的内容，手动拼接好你想返回的html标签，并且返回。单行代码的渲染方式就变了。

单行代码可以这样修改，那么代码块呢。

根据[文档](https://markdown-it.docschina.org/api/Renderer.html#renderer-rules)中的renderer.rules章节（文档。。还是有点用的。。。），我们不难发现，[源代码](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js)中其实就有例子。

例如code_inline，markdown-it的实现如下：
```javascript
default_rules.code_inline = function (tokens, idx, options, env, slf) {
  var token = tokens[idx];

return  '<code' + slf.renderAttrs(token) + '>' +
          escapeHtml(tokens[idx].content) +
          '</code>';
};
```

继续往下找，可以发现，如果是要修改原本返回形如`<pre><code class='language-python'>print('hello')</code></pre>`的东西，那么需要改的是fence函数，即，我们只需要修改`md.renderer.rules.fence`这个函数即可。

简化代码如下：
```
let md = require('markdown-it')();
md.use(function(md) {
    md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
      if(tokens[idx].info !== "echarts")
          return  `<pre><code class='languge-${tokens[idx].info}'>${tokens[idx].content}</code></pre>`;
      this.chart = JSON.parse(tokens[idx].content) //此处表示将内容存起来，存到当前页面的变量去
      return `<div id="${id}" style="width: 600px;height:400px;"></div>`
    }
}

this.$refs.md.innerHTML = md.render(mardown文本)
```

然后在mounted中让添加echart对特定标签的渲染：
```
this.$nextTick(()=>{
        let myChart = this.$echarts.init(document.getElementById("echarts"))
        myChart.setOption(opt.option)
    })
```

其中this.$echarts在main.js中引入，echart.js我使用本地文件的方式引入：

```javascript
import echarts from "./echarts.js"
Vue.prototype.$echarts = echarts
```

生于忧患，咸鱼安乐

Navigation

Recent Posts

Friend Links