MathJax: 让前端支持数学公式

时间 2019-11-29

标签 mathjax 前端支持数学公式栏目应用数学繁體版

原文原文链接

文章图片存储在GitHub，网速不佳的朋友，请看《MathJax：让前端支持数学公式》或者来个人技术小站 godbmw.comjavascript

1. 必需要说

1.1 开发背景

博主使用Vue开发的我的博客，博文使用markdown语法编写，而后交给前端渲染。为了更方便的进行说明和讲解，须要前端支持LaTex的数学公式，而且渲染好看的样式。css

1.2 效果展现

数学公式分为行内公式和跨行公式，固然都须要支持和渲染。html

我准备了3条公式，分别是行内公式、跨行公式和超长的跨行公式：前端

$\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}$$
复制代码

这篇测试文章的地址是:https://godbmw.com/passage/12。效果图以下所示： java

2. 使用MathJax

2.1 引入CDN

在使用MathJax以前，须要经过CDN引入, 在<body>标签中添加： <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>。git

2.2 配置MathJax

将MathJax的配置封装成一个函数：es6

let isMathjaxConfig = false; // 防止重复调用Config，形成性能损耗

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 //关闭右击菜单显示
    }
  });
  isMathjaxConfig = true; // 
};
复制代码

2.3 使用MathJax渲染

MathJax提供了window.MathJax.Hub.Queue来执行渲染。在执行完文本获取操做后，进行渲染操做：github

if (isMathjaxConfig === false) { // 若是：没有配置MathJax
  initMathjaxConfig();
}

// 若是，不传入第三个参数，则渲染整个document
// 由于使用的Vuejs，因此指明#app，以提升速度
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);
复制代码

2.4 修改默认样式

MathJax默认样式在被鼠标focus的时候，会有蓝色边框出现。对于超长的数学公式，x方向也会溢出。ajax

添加如下样式代码，覆盖原有样式，从而解决上述问题：npm

/* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */
.mjx-chtml {
  outline: 0;
}
.MJXc-display {
  overflow-x: auto;
  overflow-y: hidden;
}
复制代码

3. 注意事项

3.1 不要使用`npm`

不要使用npm，会有报错，google了一圈也没找到解决方案，github上源码地址有对应的issue还没解决。

博主屡次尝试也没有找到解决方法，坐等版本更新和大神指点。

3.2 动态数据

在SPA单页应用中，数据是经过Ajax获取的。此时，须要在数据获取后，再执行渲染。

若是习惯es5，能够在回调函数中调用window.MathJax.Hub.Queue。可是更推荐es6，配合Promise和async/await来避免“回调地域”。

3.3 版本问题

对于不一样版本或者不一样CDN的MathJax，第二部分的样式覆盖的class名称不一样。好比在cdnboot的v2.7.0版本中，样式覆盖的代码应该是下面这段：

/* MathJax v2.7.0 from 'cdn.bootcss.com' */
.MathJax {
  outline: 0;
}
.MathJax_Display {
  overflow-x: auto;
  overflow-y: hidden;
}
复制代码