最近在研究使用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