Plugin for VitePress to add support for viewing images in a lightbox.
npm install vitepress-plugin-lightbox 
Plugin for VitePress to add support for viewing images in lightboxes, you can check out the example site here. It is also available on NPM.
This plugin is built using the medium-zoom package.
First, install the plugin from NPM.
``bash`
npm install -D vitepress-plugin-lightbox
Then import it and update your VitePress config.mts file to use the plugin as shown below.
`ts
import { defineConfig } from "vitepress";
// Import lightbox plugin
import lightbox from "vitepress-plugin-lightbox"
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "docs",
description: "my docs",
cleanUrls: true,
themeConfig: {
...
},
markdown: {
config: (md) => {
// Use lightbox plugin
md.use(lightbox, {});
},
},
});
`
Now create the .vitepress/theme directory, and add the following two files.
.vitepress/theme/index.ts
`ts
import DefaultTheme from "vitepress/theme";
import Layout from "./Layout.vue";
export default {
extends: DefaultTheme,
Layout,
};
`
.vitepress/theme/Layout.vue
`ts
`
When you add images to your markdown files, like the example below, they are now can automatically be clicked to view in a lightbox. See the /example directory within the repository for a full working example of how to use the plugin with VitePress.
`md``
!image-1.0b9fa00a.jpg
To view working examples deployed within a VitePress static site instance, you can checkout the repository example deployed via GitHub pages here.
The scripts and documentation in this project are released under the MIT License.