feat(md-enhance): add mathjax support, close #2079 (#2110)

demo/md-enhance/src/.vuepress/config.ts

@@ -76,6 +76,9 @@ export default defineUserConfig({
       playground: {
         presets: ["ts", "vue"],
       },
+      katex: {
+        mhchem: true,
+      },
       presentation: {
         plugins: ["highlight", "math", "search", "notes", "zoom"],
       },
@@ -95,7 +98,6 @@ export default defineUserConfig({
       sub: true,
       sup: true,
       tabs: true,
-      tex: true,
       vpre: true,
       vuePlayground: true,
     }),

demo/md-enhance/src/demo/tex.md

@@ -29,3 +29,28 @@ $$
 \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
 = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
 $$
+
+### mhchem
+
+need `mhchem` extension, see [mhchem extension](https://github.com/KaTeX/KaTeX/tree/main/contrib/mhchem)
+
+```ts
+tex: {
+  render: "katex",
+  plugins: ["mhchem"],
+},
+```
+
+```md
+$$
+\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
+$$
+```
+
+<!-- markdownlint-disable -->
+
+$$
+\ce{Zn^2+  <=>[+ 2OH-][+ 2H+]  $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$  <=>[+ 2OH-][+ 2H+]  $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
+$$
+
+<!-- markdownlint-enable -->

docs/md-enhance/src/README.md

@@ -187,11 +187,13 @@ This plugin exports the following markdown-it plugin, and you can use them in ot
 - footnote
 - imageMark
 - include
+- mathjax
 - katex
 - lazyload
 - mark
 - stylize
 - sub
 - sup
 - tasklist
+- tex
 - uml

docs/md-enhance/src/config.md

@@ -195,15 +195,26 @@ interface TaskListOptions {
 }
 ```
 
-## tex
+## katex
 
-- Type: `KatexOptions | boolean`
+- Type: `KatexOptions & { mhchem?: boolean } | boolean`
 - Default: `false`
 
-Whether to enable $\TeX$ syntax support. You can pass an object to config $\KaTeX$.
+Whether to enable $\TeX$ syntax support through $\KaTeX$. You can pass an object to config $\KaTeX$.
+
+In particular, you can enable the mhchem extension with `katex.mhchem: true`.
 
 Please see [Katex Docs](https://katex.org/docs/options.html) for available options.
 
+## mathjax
+
+- Type: `MathJaxOptions | boolean`
+- Default: `false`
+
+Whether to enable $\TeX$ syntax support through Math Jax. You can pass an object to config Math Jax.
+
+Please see [source code](https://github.com/vuepress-theme-hope/vuepress-theme-hope/tree/main/packages/md-enhance/src/shared/mathjax.ts) for available options.
+
 ## include
 
 - Type: `IncludeOptions | boolean`

docs/md-enhance/src/guide/tex.md

@@ -1,5 +1,5 @@
 ---
-title: Tex
+title: TeX
 icon: tex
 ---
 
@@ -13,38 +13,44 @@ Let the Markdown file in your VuePress site support the $\TeX$ syntax.
 
 @tab TS
 
-```ts {8}
+```ts {7-10}
 // .vuepress/config.ts
 import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
 
 export default {
   plugins: [
     mdEnhancePlugin({
-      // Enable Tex Support
-      tex: true,
+      // Enable Tex Support using katex
+      katex: true,
+      // Enable Tex Support using mathjax
+      mathjax: true,
     }),
   ],
 };
 ```
 
 @tab JS
 
-```js {8}
+```js {7-10}
 // .vuepress/config.js
 import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
 
 export default {
   plugins: [
     mdEnhancePlugin({
-      // Enable Tex Support
-      tex: true,
+      // Enable Tex Support using katex
+      katex: true,
+      // Enable Tex Support using mathjax
+      mathjax: true,
     }),
   ],
 };
 ```
 
 :::
 
+You can only enable ONE of them, and katex has a higher priority.
+
 ## Grammar
 
 ### Inline Syntax
@@ -81,11 +87,38 @@ $$
 
 <!-- markdownlint-restore -->
 
+## Support List
+
+Katex:
+
+- [$\KaTeX$ Support Features](https://katex.org/docs/supported.html)
+- [$\KaTeX$ Support List](https://katex.org/docs/support_table.html)
+
+Mathjax:
+
+- [Supported TeX/LaTeX commands](https://docs.mathjax.org/en/latest/input/tex/macros/index.html#tex-commands)
+
 ## Advanced
 
-Besides setting `tex: true` in plugin options, you can also pass an object to it as `KatexOptions`. It will be passed to katex. Please see [Katex Docs](https://katex.org/docs/options.html) for available options.
+::: info KaTeX
+
+When using KaTeX, you can pass an object to `katex` as `KatexOptions`. It will be passed to KaTeX. Please see [KaTeX Docs](https://katex.org/docs/options.html) for available options.
+
+Also, a sepcial option `mhchem` is supported for you to enable mhchem extension by setting it to `true`.
+
+:::
 
-## Tutorial
+::: info Mathjax
+
+When using mathjax, you can pass an object to `mathjax`.
+
+You can set `output` option to either `svg` (default) or `chtml` to change betwwen SVG and HTML output.
+
+Also, you can set `tex` option which is passed to TeX input parser, and you can set `chtml` or `svg` option based on your output syntax which is passed to Common HTML output parser and SVG output parser.
+
+:::
+
+## Tex Tutorial
 
 ### Operator
 
@@ -412,14 +445,7 @@ $$
 
 ## Text
 
-To insert text in tex, you should use `\text{}` to wrap them.
-
-## More
-
-For more symbols, pleasae check out
-
-- [$\KaTeX$ Support Features](https://katex.org/docs/supported.html)
-- [$\KaTeX$ Support List](https://katex.org/docs/support_table.html)
+To insert text in TeX, you should use `\text{}` to wrap them.
 
 <script setup lang="ts">
 import KatexPlayground from '@KatexPlayground';

docs/md-enhance/src/zh/README.md

@@ -189,11 +189,13 @@ export default {
 - footnote
 - imageMark
 - include
+- mathjax
 - katex
 - lazyload
 - mark
 - stylize
 - sub
 - sup
 - tasklist
+- tex
 - uml

docs/md-enhance/src/zh/config.md

@@ -221,15 +221,26 @@ interface TaskListOptions {
 
 是否启用 Markdown 导入支持。你可以传入一个函数进行路径解析。
 
-## tex
+## katex
 
 - 类型: `KatexOptions | boolean`
 - 默认值: `false`
 
-是否启用 $\TeX$ 语法支持。你可以传入一个对象作为 $\KaTeX$ 的配置选项。
+是否通过 $\KaTeX$ 启用 $\TeX$ 语法支持。你可以传入一个对象作为 $\KaTeX$ 的配置选项。
+
+特别低，你可以通过 `katex.mhchem: true` 来启用 mhchem 扩展。
 
 可用的选项，详见 [Katex 文档](https://katex.org/docs/options.html)。
 
+## mathjax
+
+- 类型: `MathJaxOptions | boolean`
+- 默认值: `false`
+
+是否通过 Math Jax 启用 $\TeX$ 语法支持。你可以传递一个对象来配置 Math Jax。
+
+可用的选项，详见 [源代码](https://github.com/vuepress-theme-hope/vuepress-theme-hope/tree/main/packages/md-enhance/src/shared/mathjax.ts)。
+
 ## chart
 
 - 类型: `boolean`

docs/md-enhance/src/zh/guide/tex.md

@@ -13,38 +13,44 @@ icon: tex
 
 @tab TS
 
-```ts {8}
+```ts {7-10}
 // .vuepress/config.ts
 import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
 
 export default {
   plugins: [
     mdEnhancePlugin({
-      // 启用 TeX 支持
+      // 使用 KaTeX 启用 TeX 支持
       tex: true,
+      // 使用 mathjax 启用 TeX 支持
+      mathjax: true,
     }),
   ],
 };
 ```
 
 @tab JS
 
-```js {8}
+```js {7-10}
 // .vuepress/config.js
 import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
 
 export default {
   plugins: [
     mdEnhancePlugin({
-      // 启用 TeX 支持
+      // 使用 KaTeX 启用 TeX 支持
       tex: true,
+      // 使用 mathjax 启用 TeX 支持
+      mathjax: true,
     }),
   ],
 };
 ```
 
 :::
 
+您只能启用其中一个，并且 katex 具有更高的优先级。
+
 ## 语法
 
 ### 行内语法
@@ -75,17 +81,40 @@ $$
 
 ## 在此尝试
 
-<!-- markdownlint-disable -->
-
 <KatexPlayground />
 
-<!-- markdownlint-restore -->
+## 支持列表
+
+Katex:
+
+- [$\KaTeX$ 支持功能](https://katex.org/docs/supported.html)
+- [$\KaTeX$ 支持列表](https://katex.org/docs/support_table.html)
+
+Mathjax:
+
+- [支持的 TeX/LaTeX 命令](https://docs.mathjax.org/en/latest/input/tex/macros/index.html#tex-commands)
 
 ## 高级
 
-除了在插件选项中设置 `tex: true` 之外，你还可以将对象作为 `KatexOptions` 传递给它。 它将被传递给 katex。 有关可用选项，请参阅 [Katex 文档](https://katex.org/docs/options.html)。
+::: info KaTeX
+
+使用 KaTeX 时，您可以将对象作为 `KatexOptions` 传递给 `katex`。 它将被传递给 KaTeX 有关可用选项，请参阅 [KaTeX Docs](https://katex.org/docs/options.html)。
+
+此外，我们还支持一个特殊选项 `mhchem`，您可以通过将其设置为 `true` 来启用 mhchem 扩展。
+
+:::
 
-## 教程
+::: info Mathjax
+
+使用 mathjax 时，您可以将对象传递给 `mathjax`。
+
+您可以将 `output` 选项设置为 `svg` (默认) 或 `chtml` 以更改 SVG 和 HTML 输出。
+
+此外，您可以通过 `tex` 选项将设置传递给 TeX 输入解析器，并且可以根据出书格式，通过 `chtml` 或 `svg` 选项传递给通用 HTML 输出解析器和 SVG 输出解析器的输出语法设置 。
+
+:::
+
+## TeX 教程
 
 ### 运算符
 
@@ -410,13 +439,6 @@ $$
 
 如果你需要在公式中插入文字，请使用 `\text{}`。
 
-## 更多
-
-有关更多符号，请查看
-
-- [$\KaTeX$ 支持功能](https://katex.org/docs/supported.html)
-- [$\KaTeX$ 支持列表](https://katex.org/docs/support_table.html)
-
 <script setup lang="ts">
 import KatexPlayground from '@KatexPlayground';
 </script>

docs/theme/src/config/plugins/md-enhance.md

@@ -181,15 +181,26 @@ interface TaskListOptions {
 }
 ```
 
-### tex
+### katex
 
-- Type: `KatexOptions | boolean`
+- Type: `KatexOptions & { mhchem?: boolean } | boolean`
 - Default: `false`
 
-Whether to enable $\TeX$ syntax support. You can pass an object to config $\KaTeX$.
+Whether to enable $\TeX$ syntax support through $\KaTeX$. You can pass an object to config $\KaTeX$.
+
+In particular, you can enable the mhchem extension with `katex.mhchem: true`.
 
 Please see [Katex Docs](https://katex.org/docs/options.html) for available options.
 
+### mathjax
+
+- Type: `MathJaxOptions | boolean`
+- Default: `false`
+
+Whether to enable $\TeX$ syntax support through Math Jax. You can pass an object to config Math Jax.
+
+Please see [source code](https://github.com/vuepress-theme-hope/vuepress-theme-hope/tree/main/packages/md-enhance/src/shared/mathjax.ts) for available options.
+
 ### flowchart
 
 - Type: `boolean`