feat: add MathJax support

Author: ohxxx

docs/.vitepress/config.ts

@@ -140,6 +140,22 @@ export default async () => defineConfig({
 
     ['script', {}, fs.readFileSync(path.resolve(__dirname, './inlined-scripts/redirectDocsPath.js'), 'utf-8')],
     ['script', {}, fs.readFileSync(path.resolve(__dirname, './inlined-scripts/restorePreference.js'), 'utf-8')],
+
+    // MathJax conf
+    ['script', {}, `
+      window.MathJax = {
+        tex: {
+          inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
+          displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']],
+          processEscapes: true,
+          processEnvironments: true
+        },
+        options: {
+          skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+        }
+      };
+    `],
+    ['script', { async: '', src: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js' }, ''],
   ],
 
   markdown: {

docs/.vitepress/theme/index.ts

@@ -1,5 +1,7 @@
 import { h } from 'vue'
+import { useRoute } from 'vitepress'
 import Theme from 'vitepress/theme'
+import { watch, nextTick } from 'vue'
 import '../styles/vars.css'
 import HomePage from '../components/HomePage.vue'
 import SvgImage from '../components/SvgImage.vue'
@@ -15,7 +17,19 @@ export default {
       'doc-after': () => h(Comments),
     })
   },
-  enhanceApp({ app }) {
+  enhanceApp({ app, router }) {
     app.component('SvgImage', SvgImage)
   },
+  setup() {
+    const route = useRoute()
+    watch(
+      () => route.path,
+      () => nextTick(() => {
+        if (typeof window !== 'undefined' && (window as any).MathJax) {
+          (window as any).MathJax.typesetPromise()
+        }
+      }),
+      { immediate: true }
+    )
+  }
 }