作为一个经常要和数学打交道的学生,怎么能少了数学公式呢?所以,这次给主题加上了显示 LaTeX 数学公式的功能。

MathJax 演示

先来三条公式,分别是行内公式,跨行公式和超长的跨行公式,来看看显示的效果。
代码如下

$\alpha+\beta=\gamma$

$$\alpha+\beta=\gamma$$

$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$

显示效果如下:
$\alpha+\beta=\gamma$
这是一条行内公式:
$$\alpha+\beta=\gamma$$

$$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$
应该还不错。

使用 MathJax

首先,要引入 MathJaxjs 文件,根据文档,通过 CDN 引入制定版本,这里选择 2.7.5 版本:

    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

接下来需要初始化` MathJax`,加载配置文件(这里是将配置文件封装成了一个函数,只需要运行一次即可,每次运行只会降低性能):
const initMathjaxConfig = () => {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false, //关闭 js 加载过程信息
    messageStyle: "none", //不显示信息
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
      displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
      skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
    },
    "HTML-CSS": {
      availableFonts: ["STIX", "TeX"], //可选字体
      showMathMenu: false //关闭右击菜单显示
    }
  });
};

接下来就能够渲染页面了,首先要加载配置

initMathjaxConfig(); //加载配置

// 如果不传入第三个参数,则渲染整个 document
// 我文章的容器 ID 为 content,就用了 content,加快渲染速度
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('content')]);
Last modification:February 4th, 2020 at 02:20 pm
如果觉得我的文章对你有用,请随意赞赏