此文章发布于 67 个月前，部分信息可能已经过时，请自行斟酌确认。

转自：https://segmentfault.com/a/1190000016928859

.vuepress/config.js 文件的 head 标签中可以直接添加 fancybox 的 cdn，由于它依赖 jquery，所以还要引入 jquery。

module.exports = {
  title: '信息部技术文档',
  description: '信息部软件开发编程技术手册',
  base: '/',
  host: '0.0.0.0',
  port: '9090',
  themeConfig: {
    //其它配置
  },
  head: [
    //fancybox图片浏览
    ['script', { src: '/js/jquery-3.3.1.min.js' }],
    ['script', { src: '/plugin/FancyBox/jquery.fancybox.min.js' }],
    ['link', { rel: 'stylesheet', type: 'text/css', href: '/plugin/FancyBox/jquery.fancybox.min.css' }]
  ]
}

然后修改图片的 markdown

![xx](image001.png)

将上面的这种格式修改为下面这种，手动添加 a 标签、data-fancybox 和 href 属性即可。

<a data-fancybox title="xx" href="image001.png">![xx](image001.png)</a>

但是这样手动添加太麻烦了，并且想取消掉也不方便，这时可以安装vscode插件vuepress-img-format。

调用命令 img format 可以格式化当前文档的所有图片，img reset format 可以重置格式化。

另外也可以使用快捷键：

Ctrl + Shift +8 格式化
Ctrl + Shift + 8 重置格式化