markdown-it-custom-attrs

• 基于markdown-it 可设置自定义属性的插件
• 效果预览地址传送

vitepress 图片放大预览配置

Step. 1: 安装依赖

npm i markdown-it-custom-attrs
1

Step. 2: 引入插件

import mdItCustomAttrs  from 'markdown-it-custom-attrs'
1

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"
        })
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11

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" }],
    ]
}
1
2
3
4
5
6
7
8
9

Step. 5: 渲染效果

1
2