添加rehype-mathjax对公式和流程的支持

app/assets/css/main.css

@@ -150,14 +150,14 @@
 
 /* 统一将主题风格映射到常见元素，尽量少侵入、仅做“润色” */
 /* 图片与代码块采用卡片圆角与轻阴影，增强主题差异感 */
-:where(.prose) img,
+/* :where(.prose) img,
 :where(.prose) pre,
 :where(.prose) table {
   border-radius: var(--ui-card-radius);
   box-shadow: var(--ui-shadow);
   background-color: var(--theme-background);
   border: 1px solid var(--theme-border);
-}
+} */
 
 /* 按钮采用按钮圆角，保持各主题观感统一 */
 /* button,
@@ -176,3 +176,25 @@
 :where(.theme-minimal) .rounded-md { border-radius: var(--ui-radius); }
 :where(.theme-minimal) .rounded-lg { border-radius: calc(var(--ui-radius) + 2px); }
 :where(.theme-minimal) .rounded-xl { border-radius: calc(var(--ui-radius) + 4px); } */
+
+
+/* Inline math ($...$) 强制行内，不换行 */
+/* .math-inline,
+.math.math-inline,
+mjx-container[display="false"] {
+  display: inline !important;
+}
+
+p > mjx-container[display="false"],
+li > mjx-container[display="false"] {
+  display: inline !important;
+  margin: 0 0.15em !important;
+  vertical-align: middle !important;
+}
+
+.math-display,
+.math.math-display,
+mjx-container[display="true"] {
+  display: block !important;
+  margin: 0.75em 0 !important;
+} */

app/components/content/ProseH2.vue

@@ -49,6 +49,6 @@ const primaryHex = computed(() => {
 
 const h2Style = computed(() => ({
   backgroundColor: primaryHex.value,
-  borderRadius: 'var(--ui-card-radius)',
+  borderRadius: 'var(--ui-card-radius)'
 }))
 </script>

app/components/content/ProseH4.vue

@@ -25,5 +25,4 @@ const themeSizeClass = computed(() => {
     ? 'text-xl lg:text-1xl'
     : 'text-1xl lg:text-2xl'
 })
-
 </script>

app/components/content/ProseH5.vue

@@ -1,7 +1,7 @@
 <template>
   <h5
     :id
-    :class="['scroll-m-20 font-bold text-primary tracking-tight [&:not(:first-child)]:mt-6',themeSizeClass]"
+    :class="['scroll-m-20 font-bold text-primary tracking-tight [&:not(:first-child)]:mt-6', themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -25,5 +25,4 @@ const themeSizeClass = computed(() => {
     ? 'text-lg lg:text-xl'
     : 'text-xl lg:text-1xl'
 })
-
 </script>

app/components/content/ProseH6.vue

@@ -1,7 +1,7 @@
 <template>
   <h5
     :id
-    :class="['scroll-m-20 font-normal text-primary tracking-tight [&:not(:first-child)]:mt-6',themeSizeClass]"
+    :class="['scroll-m-20 font-normal text-primary tracking-tight [&:not(:first-child)]:mt-6', themeSizeClass]"
   >
     <NuxtLink
       v-if="id && generate"
@@ -25,5 +25,4 @@ const themeSizeClass = computed(() => {
     ? 'text-lg lg:text-xl'
     : 'text-xl lg:text-1xl'
 })
-
 </script>

app/components/content/ProseStrong.vue

@@ -1,5 +1,5 @@
 <template>
-    <strong class="text-primary">
+  <strong class="text-primary">
-        <slot />
+    <slot />
-    </strong>
+  </strong>
-</template>
+</template>

app/components/content/ProseTable.vue

@@ -1,8 +1,8 @@
 <template>
-    <table>
+  <table>
-      <slot />
+    <slot />
-    </table>
+  </table>
-  </template>
+</template>
 
 <!-- <style scoped>
 /* 强化表头背景，仅此组件内生效 */
@@ -12,4 +12,4 @@ table :deep(thead th) {
 .dark table :deep(thead th) {
   background-color: rgba(255, 255, 255, 0.08);
 }
-</style> -->
+</style> -->

app/components/content/ProseTh.vue

@@ -1,5 +1,5 @@
 <template>
-    <th class=" bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 py-2">
+  <th class=" bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 py-2">
-        <slot />
+    <slot />
-    </th>
+  </th>
-</template>
+</template>

app/components/content/ProseThead.vue

@@ -1,5 +1,5 @@
 <template>
-    <thead>
+  <thead>
-      <slot />
+    <slot />
-    </thead>
+  </thead>
-  </template>
+</template>

content/docs/1.简单文档/3.writing/5.test.md

@@ -6,7 +6,6 @@ navigation:
 ---
 
 
-# 
 
 欢迎来到 Markdown 的奇妙世界！无论你是写作爱好者、开发者、博主，还是想要简单记录点什么的人，Markdown 都能成为你新的好伙伴。它不仅让写作变得简单明了，还能轻松地将内容转化为漂亮的网页格式。今天，我们将全面探讨 Markdown 的基础和进阶语法，让你在这个过程中充分享受写作的乐趣！
 
@@ -94,7 +93,7 @@ Markdown 中的段落就是一行接一行的文本。要创建新段落，只
 - **行内代码**：用反引号包裹，如 `code`。
 - **代码块**：用三个反引号包裹，并指定语言，如：
 
-```js
+```js[test.vue]
 console.log("Hello, Doocs!");
 ```
 
@@ -128,7 +127,7 @@ Markdown 支持简单的表格，用 `|` 和 `-` 分隔单元格和表头。
 
 Markdown 允许嵌入 LaTeX 语法展示数学公式：
 
-- **行内公式**：用 `$` 包裹公式，如 $E = mc^2$。
+- **行内公式**：用 `$` 包裹公式，如  $E = mc^2$ 。
 - **块级公式**：用 `$$` 包裹公式，如：
 
 $$
@@ -140,6 +139,17 @@ d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1
 \end{aligned}
 $$
 
+
+### 以下是使用mate字段包裹
+```math
+\begin{aligned}
+d_{i, j} &\leftarrow d_{i, j} + 1 \\
+d_{i, y + 1} &\leftarrow d_{i, y + 1} - 1 \\
+d_{x + 1, j} &\leftarrow d_{x + 1, j} - 1 \\
+d_{x + 1, y + 1} &\leftarrow d_{x + 1, y + 1} + 1
+\end{aligned}
+```
+
 1. 列表内块公式 1
 
   $$

nuxt.config.ts

@@ -34,7 +34,20 @@ export default defineNuxtConfig({
             // Theme used if `html.sepia`
             sepia: 'monokai'
           }
+        },
+        remarkPlugins: {
+          // Override remark-emoji options
+          'remark-mermaidjs': {
+          },
+
+          'remark-gfm': {},
+          'remark-math': {}
+        },
+        rehypePlugins: {
+          // 'rehype-katex': {},
+          'rehype-mathjax': {}
         }
+
       },
       pathMeta: {
         slugifyOptions: {
@@ -44,6 +57,11 @@ export default defineNuxtConfig({
       }
     }
   },
+  mdc: {
+    highlight: {
+      noApiRoute: false
+    }
+  },
   routeRules: {
     '/': { static: true },
     '/docs/**': { ssr: false },

package.json

@@ -41,7 +41,11 @@
     "minisearch": "^7.1.2",
     "nuxt": "^4.0.3",
     "nuxt-llms": "0.1.3",
-    "nuxt-og-image": "^5.1.9"
+    "nuxt-og-image": "^5.1.9",
+    "playwright": "^1.54.2",
+    "rehype-mathjax": "^7.1.0",
+    "remark-math": "^6.0.0",
+    "remark-mermaidjs": "^7.0.0"
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.57",