Support zoom image

docs/.vitepress/theme/index.ts

@@ -1,12 +1,28 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
+import { h, nextTick, onMounted, watch } from 'vue'
+import { useRoute, type Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import mediumZoom from 'medium-zoom'
 // import AdSense from '../../components/AdSense.vue'
 
 export default {
   extends: DefaultTheme,
+  setup() {
+    // https://github.com/vuejs/vitepress/issues/854
+    const route = useRoute()
+    const initZoom = () => {
+      // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
+      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
+    }
+    onMounted(() => {
+      initZoom()
+    })
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    )
+  },
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // 'aside-ads-before': () => h(AdSense),

docs/.vitepress/theme/style.css

@@ -136,3 +136,11 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
+
+.medium-zoom-overlay {
+  z-index: 30;
+}
+
+.medium-zoom-image--opened {
+  z-index: 31;
+}

package.json

@@ -20,6 +20,9 @@
   },
   "author": "narumi",
   "license": "MIT",
+  "dependencies": {
+    "medium-zoom": "^1.1.0"
+  },
   "devDependencies": {
     "@types/node": "^20.11.30",
     "gray-matter": "^4.0.3",