feat: styles sync

.vitepress/config.mts

@@ -5,6 +5,7 @@ import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import Icons from "unplugin-icons/vite";
 import { FileSystemIconLoader } from "unplugin-icons/loaders";
 import { SVG, cleanupSVG, parseColors, runSVGO } from "@iconify/tools";
+import ImageFiguresPlugin from "markdown-it-image-figures";
 
 import {
   S3Client,
@@ -158,6 +159,12 @@ export default defineConfig({
     },
   },
   appearance: false,
+  markdown: {
+    breaks: true,
+    config: (md) => {
+      md.use(ImageFiguresPlugin, { figcaption: true });
+    },
+  },
 
   vite: {
     publicDir: "../public",

.vitepress/theme/custom-doc.scss

@@ -0,0 +1,9 @@
+figure {
+  text-align: center;
+
+  figcaption {
+    color: var(--vp-c-text-3);
+    font-size: 0.875em;
+    margin-top: 5px;
+  }
+}

.vitepress/theme/index.ts

@@ -6,6 +6,7 @@ import CustomLayout from "../../components/CustomLayout.vue";
 import i18n from "../../plugins/i18n";
 import 'element-plus/dist/index.css'
 import "./style.css";
+import "./custom-doc.scss";
 
 export default {
   extends: DefaultTheme,

package-lock.json

@@ -11,7 +11,8 @@
         "@vueuse/core": "^10.11.0",
         "element-plus": "^2.7.5",
         "lodash": "^4.17.21",
-        "mark.js": "^8.11.1",
+        "mark.js": "8.11.1",
+        "markdown-it-image-figures": "^2.1.1",
         "md-editor-v3": "^4.17.0",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
@@ -4740,7 +4741,7 @@
     },
     "node_modules/markdown-it-image-figures": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmmirror.com/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/markdown-it-image-figures/-/markdown-it-image-figures-2.1.1.tgz",
       "integrity": "sha512-mwXSQ2nPeVUzCMIE3HlLvjRioopiqyJLNph0pyx38yf9mpqFDhNGnMpAXF9/A2Xv0oiF2cVyg9xwfF0HNAz05g==",
       "engines": {
         "node": ">=12.0.0"

package.json

@@ -23,6 +23,7 @@
     "element-plus": "^2.7.5",
     "lodash": "^4.17.21",
     "mark.js": "8.11.1",
+    "markdown-it-image-figures": "^2.1.1",
     "md-editor-v3": "^4.17.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",