- 基于markdown-it 可设置自定义属性的插件
npm i markdown-it-custom-attrs
import mdItCustomAttrs from 'markdown-it-custom-attrs'
import mdItCustomAttrs from 'markdown-it-custom-attrs'
export default {
markdown:{
config: (md) => {
// use more markdown-it plugins!
md.use(mdItCustomAttrs, 'image', {
'data-fancybox': "gallery"
})
}
}
}
- 配置
.vitepress/config.js
文件 - 加入
head
配置
export default {
head:[
[
"link",
{ rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" },
],
["script", { src: "https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js" }],
]
}
<!-- ![](图片地址) -->
<img src="图片地址" data-fancybox="gallery"/>