修改vditor以支持javascript形式的json

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

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

```echarts
xxx
```

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

```chart
xxx
```

为了统一，可以把docsify-echarts-plugin插件中标识符改为与vditor一致即可。

另外，vditor中的echarts图表，只能输入严格的json格式数据，否则会报错，而docsify-echarts-plugin是支持javascript形式的json的。
比如，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]
    }
  ]
}

而vditor即会报错：

echarts render error: 
SyntaxError: Unexpected token s in JSON at position 2

它需要输入：

{
  "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]
    }
  ]
}

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

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

const option = JSON.parse(text)

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

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

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

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

npm run build

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

index.css
index.min.js

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

插件目录一般在：

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