fix: revert mathjax changes

Author: yanglbme

apps/web/index.html

@@ -96,14 +96,12 @@
       window.MathJax = {
         tex: { tags: 'ams' },
         svg: { fontCache: 'none' },
-        loader: {
-          paths: {
-            fonts: '[mathjax]/../',
-          },
-        },
       }
     </script>
-    <script id="MathJax-script" src="static/mathjax/tex-svg.js"></script>
+    <script
+      id="MathJax-script"
+      src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/mathjax@3/es5/tex-svg.js"
+    ></script>
     <script type="module" src="/src/main.ts"></script>
     <script type="module" src="/src/sidepanel.ts"></script>
   </body>

apps/web/package.json

@@ -49,7 +49,6 @@
     "juice": "11.0.3",
     "lucide-vue-next": "^1.0.0",
     "marked": "^17.0.5",
-    "mathjax": "^4.1.1",
     "pinia": "^3.0.4",
     "qiniu-js": "^3.4.4",
     "radix-vue": "^1.9.17",

apps/web/plugins/vite-plugin-mathjax-local.ts

@@ -0,0 +1,29 @@
+import type { Plugin } from 'vite'
+import process from 'node:process'
+
+/**
+ * Vite 插件：在 uTools 构建时将远程资源替换为本地资源
+ */
+export function utoolsLocalAssetsPlugin(): Plugin {
+  const isUTools = process.env.SERVER_ENV === `UTOOLS`
+
+  return {
+    name: `vite-plugin-utools-local-assets`,
+    apply: `build`,
+    transformIndexHtml: {
+      order: `post`,
+      handler(html) {
+        if (!isUTools)
+          return html
+
+        // 替换 MathJax
+        html = html.replace(
+          /https:\/\/cdn-doocs\.oss-cn-shenzhen\.aliyuncs\.com\/npm\/mathjax@3\/es5\/tex-svg\.js/g,
+          `./static/libs/mathjax/tex-svg.js`,
+        )
+
+        return html
+      },
+    },
+  }
+}

apps/web/plugins/vite-plugin-utools-local-assets.ts

@@ -11,7 +11,7 @@ import { defineConfig, loadEnv } from 'vite'
 import { VitePluginRadar } from 'vite-plugin-radar'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
-import { mathjaxLocalPlugin } from './plugins/vite-plugin-mathjax-local'
+import { utoolsLocalAssetsPlugin } from './plugins/vite-plugin-utools-local-assets'
 
 const isNetlify = process.env.SERVER_ENV === `NETLIFY`
 const isUTools = process.env.SERVER_ENV === `UTOOLS`
@@ -47,7 +47,7 @@ export default defineConfig(({ mode }) => {
       Components({
         resolvers: [],
       }),
-      mathjaxLocalPlugin(),
+      isUTools && utoolsLocalAssetsPlugin(),
     ],
     resolve: {
       alias: { '@': path.resolve(__dirname, `./src`) },

apps/web/vite.config.ts

@@ -17,36 +17,31 @@ function createRenderer(defaultDisplay: boolean, withStyle: boolean = true) {
   return (token: any) => {
     const display = token.displayMode ?? defaultDisplay
 
-    try {
-      // @ts-expect-error MathJax is a global variable
-      window.MathJax.texReset()
-      // @ts-expect-error MathJax is a global variable
-      const mjxContainer = window.MathJax.tex2svg(token.text, { display })
-      const svg = mjxContainer.firstChild
-      const width = svg.style[`min-width`] || svg.getAttribute(`width`)
-      svg.removeAttribute(`width`)
-
-      if (withStyle) {
-        svg.style.display = `initial`
-        svg.style.setProperty(`max-width`, `300vw`, `important`)
-        svg.style.flexShrink = `0`
-        svg.style.width = width
-      }
-
-      if (!display) {
-        return `<span class="katex-inline">${svg.outerHTML}</span>`
-      }
-
-      return `<section class="katex-block">${svg.outerHTML}</section>`
+    // @ts-expect-error MathJax is a global variable
+    window.MathJax.texReset()
+    // @ts-expect-error MathJax is a global variable
+    const mjxContainer = window.MathJax.tex2svg(token.text, { display })
+    const svg = mjxContainer.firstChild
+    const width = svg.style[`min-width`] || svg.getAttribute(`width`)
+    svg.removeAttribute(`width`)
+
+    // 行内公式对齐 https://groups.google.com/g/mathjax-users/c/zThKffrrCvE?pli=1
+    // 直接覆盖 style 会覆盖 MathJax 的样式，需要手动设置
+    // svg.style = `max-width: 300vw !important; display: initial; flex-shrink: 0;`
+
+    if (withStyle) {
+      svg.style.display = `initial`
+      svg.style.setProperty(`max-width`, `300vw`, `important`)
+      svg.style.flexShrink = `0`
+      svg.style.width = width
     }
-    catch {
-      // MathJax v4 may throw retry errors when font data not yet loaded
-      const escaped = token.text.replace(/</g, `&lt;`).replace(/>/g, `&gt;`)
-      if (!display) {
-        return `<span class="katex-inline"><code>${escaped}</code></span>`
-      }
-      return `<section class="katex-block"><code>${escaped}</code></section>`
+
+    if (!display) {
+      // 新主题系统：使用 class 而非内联样式
+      return `<span class="katex-inline">${svg.outerHTML}</span>`
     }
+
+    return `<section class="katex-block">${svg.outerHTML}</section>`
   }
 }