markdown-it-custom-attrs
- 基于markdown-it 可设置自定义属性的插件
- 效果预览地址传送
vitepress 图片放大预览配置
Step. 1: 安装依赖
npm i markdown-it-custom-attrs
Step. 2: 引入插件
import mdItCustomAttrs from 'markdown-it-custom-attrs'
Step. 3: 配置 vitepress config.js文件
import mdItCustomAttrs from 'markdown-it-custom-attrs'
export default {
markdown:{
config: (md) => {
// use more markdown-it plugins!
md.use(mdItCustomAttrs, 'image', {
'data-fancybox': "gallery"
})
}
}
}
Step. 4: 引入图片灯箱js和css文件
- 配置
.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/ui@4.0/dist/fancybox.umd.js" }],
]
}
Step. 5: 渲染效果
<!--  -->
<img src="图片地址" data-fancybox="gallery"/>
文章来源地址https://www.toymoban.com/news/detail-633902.html
文章来源：https://www.toymoban.com/news/detail-633902.html
到了这里，关于怎么给你的vitepress添加图片放大预览效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
