MathJax: 如何让你的博客支持数学公式
1.前情提要
1.1背景介绍
我使用<span style="color:DB2828;">laravel</span>框架开发的个人博客,博客文章使用<span style="color:DB2828;">markdown</span>语法编写，前端直接展示的是编辑渲染后的html格式。为了更方便的说明和讲解，需要编辑器支持<span style="color:DB2828;">LaTex</span>的数学公式，同时尽量同现有的主流博客网站同步，如简书等。 引入国外一款偏向公益性质的开源项目MathJax。
网络存在很多2.xx版本的教程，此博客文章适用于最新版的3.xx的MathJax系列。
1.2关于MathJax
该开源项目是NumFOCUS Foundation基金会支持的，以下是截取官网的一段结束。
MathJax is a fiscally sponsored project under the auspices of the NumFOCUS Foundation, which serves as the legal and fiscal umbrella for the MathJax project and several dozen other open-source, scientifically oriented software products.
Originally, MathJax was supported by The MathJax Consortium, a joint venture of the American Mathematical Society(AMS) and the Society for Industrial and Applied Mathematics(SIAM) to advance mathematical and scientific content on the web. We are grateful for the commitment offered by the Consortium for over 10 years, without which MathJax would not exist today.
1.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}$$
这是一段行内公式：
这是一段跨行公式：
这是一段超长的跨行公式：
2.编辑器引入MathJax
2.1MathJax使用说明
一般都采用直接导入CDN的办法，但是在多个页面都使用时不利用后期的维护。此博客文章采用统一的初始化JS文件，然后页面只需要引入此文件就可以了。
此博客使用的是官方的CDN，所以再使用过程中能自动获取最新的版本。
2.2页面加载初始化文件
// 引入MathJax本地配置
<script src="/markdown/mathjax/mathjax_init.js" ></script>
2.3配置MathJax
/**
* https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
* <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
* MathJax初始化本地配置
*/
// https://www.cnblogs.com/SilverSquab/p/11459218.html
// 检测是否初始化 防止重复执行
let isMathJaxConfig = false;
const initMathJaxConfig = function () {
if(isMathJaxConfig){
// 已初始化 退出
return ;
}
//初始化
if (!window.MathJax) {
window.MathJax = {
tex: {
inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
autoload: {
color: [],
colorV2: ['color']
},
packages: {'[+]': ['noerrors']}
},
svg: {fontCache: 'global'},
options: {
skipHtmlTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"], //避开某些标签
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
},
};
}
// 加载js
var script = document.createElement('script');
// 将公式转换成html输出
script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
// 将公式转换成svg输出
// script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js';
document.head.appendChild(script);
// 标记为已经执行初始化
isMathJaxConfig = true;
};
2.4执行初始化MathJax
// 规定页面加载完成执行MathJax初始化方法
//参考 https://docs.mathjax.org/en/latest/web/typeset.html?highlight=texreset#load-for-math
(function () {
var body = document.body.textContent;
if (body.match(/(?:\$|\\\(|\\\[|\\begin\{.*?})/)) {
initMathJaxConfig();
}
})();
2.5使用MathJax渲染
//转换数学公式方法 页面内方法调用 动态加载的内容的公式转换
const MathQueue = function () {
if(!isMathJaxConfig){
initMathJaxConfig();
return;
}
// 主要方法
MathJax.texReset();
MathJax.typesetClear();
MathJax.typesetPromise();
};
2.6修改默认样式
对于超长的跨行数学公式，x方向也会溢出。
添加以下样式代码，覆盖原有样式，从而解决上述问题：
/*MathJax样式*/
mjx-container[jax="CHTML"][display="true"] {
white-space: pre;
overflow-x: auto;
padding: 0 15px 10px;
}
mjx-container[jax="CHTML"][display="true"] mjx-math {
white-space: pre;
word-wrap: normal;
word-break: normal!important;
}
2.7版本问题
由于网站一堆的2.xx版本的代码说明，官网已更新到3.xx版本的文档。使用官方工具可以过渡到3.xx版本。
使用MathJax配置转换器可以将低版本的配置轻松额转换到最新版本
