mathjax 数学公式的使用

这里使用的是mathjax2.7.5版本，其他版本或有不同

下载地址：https://github.com/mathjax/MathJax/releases/tag/2.7.5

MathJax默认样式在被鼠标focus的时候，会有蓝色边框出现。对于超长的数学公式，x方向也会溢出。
添加以下样式代码，覆盖原有样式，从而解决上述问题：

.mjx-chtml {
    outline: 0;
}
.MJXc-display {
    overflow-x: auto;
    overflow-y: hidden;
}

html加载js

<script type="text/javascript" async
        src="/mathjax2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

 

ajax请求数据后渲染数学公式

//mathjax数学公式加载
MathJax.Hub.Config({
    showProcessingMessages: false, //关闭js加载过程信息
    messageStyle: "none", //不显示信息
    'HTML-CSS': {
        showMathMenu: false //禁用右键菜单
    },
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
// entry-content是文章页的内容div的class
var math = document.getElementsByClassName("right-wrapper")[0];
MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);

 

参考：https://blog.csdn.net/AsuraDong/article/details/82940265

参考：https://www.mobibrw.com/2019/21636