浏览器渲染数学公式

使用 MathJax 可以在主流浏览器渲染 LaTeX 格式的数学公式，WordPress 上也可以用。

主页：https://www.mathjax.org/

GitHub：https://github.com/mathjax/MathJax

使用方式

直接引用CDN

在页面 header 中加入以下代码即可：

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

其中 polyfill 库是用来提升兼容性的，可以不要

下载到本地使用

方式一：使用 npm 下载

npm install mathjax@3
mv node_modules/mathjax/es5 你的存放地址/mathjax

方式二：直接下载源码文件

git clone https://github.com/mathjax/MathJax.git mj-tmp
mv mj-tmp/es5 你的存放地址/mathjax

然后在项目中引用即可

<script id="MathJax-script" async src="你的存放地址/mathjax/tex-chtml.js"></script>

在 Node.js 项目中使用

安装包：

npm install mathjax@3

在项目中引用：

require('mathjax')
  .init({
    loader: {
      load: ['input/tex', 'output/svg'],
    },
  })
  .then((MathJax) => {
    const svg = MathJax.tex2svg('\\frac{1}{x^2-1}', { display: true });
    console.log(MathJax.startup.adaptor.outerHTML(svg));
  })
  .catch((err) => console.log(err.message));

注意事项

MathJax 默认不支持使用单个 $ 作为内联公式，因为美元符号经常会被用在展示价格，容易引起冲突。应使用 $...$ 代替 $...$ 。

行级公式可使用 $$...$$ 或 \[...\]。

HTML示例

创建一个 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <title>MathJax TeX Test Page</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script
    type="text/javascript"
    id="MathJax-script"
    async
    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
  ></script>
</head>
<body>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

浏览器打开得到

在 WordPress 中使用

方式一：修改 header.php 文件

修改 /var/www/html/wp-content/themes/sacchaone/header.php 文件即可：

方式二：使用 Header Footer Code Manager 插件

使用 Header Footer Code Manager 插件在头部插入一个引入该 JS 的脚本。

Header Footer Code Manager 插件有的时候会保存失败，多试几次。