user
添加MathJax: 让你的前端支持数学公式显示

作为一个经常要和数学打交道的学生,怎么能少了数学公式呢?所以,这次给主题加上了显示 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

01f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx1201f(x)dx12\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

首先,要引入 MathJax 的 js 文件,根据文档,通过 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')]);

遇到的问题

  • Nuxt 貌似无法用 npm 安装,因为 MathJax 里用到了 Window 对象,而在服务端渲染的话,没有 Window 对象,会报错。我也没找到只让它在 browser 运行的代码。(很可能是因为我太菜
  • 基于上一个问题,我只能动态加载 js,然后在加载配置,渲染。
  • 本站自带的阅读模式下,无法识别 LaTex。(很好解决的一个问题。重新 Queue 一下就好,下次有空修复)
微信小程序码
网站网页 介绍网页技术和有意思的网站
——
Total Comments(Loading)
New to Old
defaultimg
Input Your Information to Comment
Loading