VuePress で markdown-it-charts (WIP)
なぜか動かない...
インストールと設定
yarn add --dev markdown-it-charts
1
docs/.vuepress/config.js
module.exports = {
markdown: {
config: md => {
md.use(require('markdown-it-charts'))
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
表示確認
\```chart
{
"type": "pie",
"data": {
"labels": [
"Red",
"Blue",
"Yellow"
],
"datasets": [
{
"data": [
300,
50,
100
],
"backgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
"hoverBackgroundColor": [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}
]
},
"options": {}
}
\```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32