最近在研究使用docsify+markdown的文档管理，markdown文件使用VSCode+Office Viewer(Markdown Editor)插件来编写，Office Viewer(Markdown Editor)插件使用了vditor markdown编辑器，功能非常强大，支持很多扩展。为了让docsify生成的Web页面也支持更多的markdown扩展，前一篇博文 使用docsify+markdown+vditor构建gitlab pages文档库介绍了相应的源码。

但是对echart图表支持有一些差别，vditor使用的标识符为

1```echarts
2xxx

1
2
3而docsify使用插件docsify-echarts-plugin使用的标识符为：

1xxx

1
2
3为了统一，可以把docsify-echarts-plugin插件中标识符改为与vditor一致即可。
4
5另外，vditor中的echarts图表，只能输入严格的json格式数据，否则会报错，而docsify-echarts-plugin是支持javascript形式的json的。
6 比如，docsify-echarts-plugin支持如下输入：

{ settings: { theme: { categoryAxis: { axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false } }, valueAxis: { axisLine: { show: false } } } }, xAxis : [ { type : ‘category’, data : [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’] } ], yAxis : [{ type : ‘value’ }], series : [ { name:‘直接访问’, type:‘bar’, barWidth: ‘60%’, data:[10, 52, 200, 334, 390, 330, 220] } ] }

1
2
3而vditor即会报错：
4
5```bash
6echarts render error: 
7SyntaxError: Unexpected token s in JSON at position 2

它需要输入：

 1{
 2  "settings": {
 3    "theme": {
 4      "categoryAxis": {
 5        "axisLine": { "show": false },
 6        "axisTick": { "show": false },
 7        "splitLine": { "show": false }
 8      },
 9      "valueAxis": { "axisLine": { "show": false } }
10    }
11  },
12  "xAxis": [
13    {
14      "type": "category",
15      "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
16    }
17  ],
18  "yAxis": [{ "type": "value" }],
19  "series": [
20    {
21      "name": "直接访问",
22      "type": "bar",
23      "barWidth": "60%",
24      "data": [10, 52, 200, 334, 390, 330, 220]
25    }
26  ]
27}

即所有字段以及字符串值都需要使用双引号括起来。

如果vditor也能支持非严格的json，即javascript形式的json就好了，但是目前官方还没修改，笔者作了一下尝试，修改vditor的源码：src\ts\markdown\chartRender.ts，在

1const option = JSON.parse(text)

前面添加两行代码，最后修改为：

1var js = eval("(" + text + ")");
2var strJS = JSON.stringify(js);
3const option = JSON.parse(strJS)

即可，但是不支持在输入数据中有注释。

使用下面的命令进行编译：

1npm run build

编译成功后会生成dist目录，把下面两个文件

1index.css
2index.min.js

复制到VSCode+Office Viewer(Markdown Editor)插件目录，替换vditor.css和vditor.js即可。

插件目录一般在：

C:\Users\用户名.vscode\extensions\cweijan.vscode-office-x.x.x\resource\vditor