1. 必须要说
1.1 开发背景
博主使用
Vue
开发的
个人博客
，博文使用
markdown
语法编写，然后交给前端渲染。为了更方便的进行说明和讲解，
需要前端支持
LaTex
的数学公式，并且渲染好看的样式
。
1.2 效果展示
数学公式分为行内公式和跨行公式，当然都需要支持和渲染。
我准备了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
。效果图如下所示：
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>
。
2.2 配置MathJax
将MathJax的配置封装成一个函数：
let isMathjaxConfig = false;
const initMathjaxConfig = () => {
if (!window.MathJax) {
return;
window.MathJax.Hub.Config({
showProcessingMessages: false,
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
来执行渲染。在执行完文本获取操作后，进行渲染操作：
if (isMathjaxConfig === false) {
initMathjaxConfig();
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);
复制代码
2.4 修改默认样式
MathJax
默认样式在被鼠标
focus
的时候，会有蓝色边框出现。对于超长的数学公式，x方向也会溢出。
添加以下样式代码，覆盖原有样式，从而解决上述问题：
.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 {
outline: 0;
.MathJax_Display {
overflow-x: auto;
overflow-y: hidden;
复制代码
4. 更多资料
前端整合MathjaxJS的配置笔记
Mathjax官网
Mathjax中文文档
