.vitepress/config.mjs

@@ -1,6 +1,9 @@
 import { defineConfig } from 'vitepress'
+import { withMermaid } from 'vitepress-plugin-mermaid'
+import mathjax3 from 'markdown-it-mathjax3'
 
-export default defineConfig({
+export default withMermaid(
+  defineConfig({
     title: 'HF-MES v5.0 使用手册',
     description: 'HF-MES v5.0 制造执行系统完整使用指南',
     lang: 'zh-CN',
@@ -200,7 +203,10 @@ export default defineConfig({
         light: 'github-light',
         dark: 'github-dark'
       },
-    lineNumbers: false
+      lineNumbers: false,
+      config(md) {
+        md.use(mathjax3)
+      }
     },
 
     head: [
@@ -209,3 +215,5 @@ export default defineConfig({
       ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }]
     ]
   })
+
+)

.vitepress/theme/index.ts

@@ -1,6 +1,36 @@
 import DefaultTheme from 'vitepress/theme'
+import mediumZoom from 'medium-zoom'
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+
 import './style/print.css'
+import './style/zoom.css'
 
 export default {
   ...DefaultTheme,
+
+  setup() {
+    const route = useRoute()
+
+    const initZoom = () => {
+      mediumZoom('.main img', {
+        background: 'rgba(0,0,0,0.8)'
+      })
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        initZoom()
+      })
+    })
+
+    watch(
+      () => route.path,
+      () => {
+        nextTick(() => {
+          initZoom()
+        })
+      }
+    )
+  }
 }

.vitepress/theme/style/zoom.css

@@ -0,0 +1,7 @@
+.medium-zoom-overlay {
+  z-index: 9998;
+}
+
+.medium-zoom-image--opened {
+  z-index: 9999;
+}