这篇文章是我给Pinghsu主题增加数学公式功用的一个小教程，包括我大批的官方文档阅读后的实践，随着这篇设置教程走，你能够做到给任何一个须要数学公式的站点增加支撑。
教程如题目所述是针对 Mathjax 的实践，我简朴相识一下 KaTex ，也是个不错的挑选。
MathJax简介
MathJax是一款运行在浏览器中的开源的数学标记衬着引擎，运用MathJax能够轻易的在浏览器中显现数学公式，不须要运用图片。现在，MathJax能够剖析Latex、MathML和ASCIIMathML的标记言语。(Wiki)
引入MathJax
在页脚处，引入官方的cdn
<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>官方cdn的js在国内接见慢，所以我们平常引入的是国内的公共资源cdn供应的js,这里特别感谢BootCDN
<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>但这个js照样会调用到 cdn.mathjax.org 里的一些设置js文件，我们最幸亏head内加一个dns-prefetch，用于网页加快，相识更多能够接见我别的一篇文章：here
<link rel="dns-prefetch" href="//cdn.bootcss.com" /><link rel="dns-prefetch" href="//cdn.mathjax.org" />外联config申明
我们引入MathJax，发明链接背面多了个?config=TeX-AMS-MML_HTMLorMML
这个多出来的东西实际上是通知MathJax，我们要用到的叫TeX-AMS-MML_HTMLorMML.js的设置文件，其用来掌握显现数学公式的HTMl显现输出
这个设置文件实在也能够经由历程指定URL猎取，官方例子以下
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML,http://myserver.com/MathJax/config/local/local.js">
</script>MathJax.js也用到其他js,这些js都来自官方的cdn里，所以这也是诠释了上面为何我们须要对官方cdn举行加快
下面是官方更细致的TeX-AMS-MML_HTMLorMML设置文件的申明
This configuration file is the most general of the pre-defined configurations. It loads all the important MathJax components, including the TeX and MathML preprocessors and input processors, the AMSmath, AMSsymbols, noErrors, and noUndefined TeX extensions, both the native MathML and HTML-with-CSS output processor definitions, and the MathMenu and MathZoom extensions.
In addition, it loads the mml Element Jax, the TeX and MathML input jax main code (not just the definition files), as well as the toMathML extension, which is used by the Show Source option in the MathJax contextual menu. The full version also loads both the HTML-CSS and NativeMML output jax main code, plus the HTML-CSS mtable extension, which is normally loaded on demand.
更多设置文件信息请看：here
内联config申明
预会同时，官方实在还供应了一个能让我们内联一个设置选项的功用
很简朴就是运用<script></script>标签对，但注重的是须要声明范例type="text/x-mathjax-config"。要想让这个内联设置见效就得放在MathJax.js之前，例子以下
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
});
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>个中MathJax.Hub.Config()里的设置选项是本篇文章的重点
辨认公式
我们能够经由历程MathJax.Hub.Config()中tex2jax去完成公式辨认
官方例子，以下
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
}
});
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>个中inlineMath辨认的单行内的数学公式,我们能够经由历程$ ... $或\\( ... \\)去辨认这类数学公式
结果以下:
When $a \ne 0$, there are two solutions to $(ax^2 + bx + c = 0)$
那末displayMath就是辨认全部自力段落的数学公式而且居中显现,我们能够经由历程$$ ... $$或\\[ ... \\]去辨认这类数学公式
结果以下:
$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}
$$
在中文天下里，我们每每喜好用()或许[]去备注或许圈住主要的字段，所以在平常状况下我们并不须要\( ... \)和\[ ... \]去辨认公式
但也会有碰到两个$$的状况形成误伤，别急，先看完，你就晓得怎样处理了
地区挑选性辨认
束缚辨认局限
我们的数学公式通常是在文章里，那末怎样完成只在文章的标签对内里去做公式辨认，以下
var mathId = document.getElementById("post-content");
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);默许状况下,MathJax.Hub.Queue(["Typeset",MathJax.Hub])是对全部DOM树举行辨认的
我们要束缚辨认局限，官方文档通知我们MathJax.Hub.Queue的第三个参数就是辨认局限，上面的代码就是通知我们要在id为post-content的标签内去做公式辨认
避开特别标签和Class
另有其他要领吗？
有，那就是避开一些特别的标签或许Class,以下
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ["$", "$"] ],
displayMath: [ ["$$","$$"] ],
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
ignoreClass:"class1"
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);个中skipTags用来避开一些特别的标签，这里避开是script,noscript,style,textarea,pre,code,a的标签内
ignoreClass用来避开标签内声明的CSS Class属性，这里避开的是带有class="class1"的标签内
假如我们不想让mathjax辨认批评里的公式就能够用ignoreClass
假如有多个Class须要避开，我们能够经由历程 | 来辨别，写成ignoreClass: "class1|class2"就能够了
更多
猎取更多tex2jax的设置信息接见：here
美化数学公式
去掉蓝框
上图所示的是，点击该公式时四周有一圈蓝色的边框，我们能够经由历程增加CSS去掉，以下
.MathJax{outline:0;}假如要转变字体大小，以下
.MathJax span{font-size:15px;}公式太长的时刻会溢出，处理以下
.MathJax_Display{overflow-x:auto;overflow-y:hidden;}扩大功用
为了更好完成美化数学公式，我们须要扩大一下MathJax.Hub.Config()，以下
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ["$", "$"] ],
displayMath: [ ["$$","$$"] ],
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'],
ignoreClass:"class1"
},
"HTML-CSS": {
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);我们能够在HTML-CSS增加可用字体，以下
"HTML-CSS": {
availableFonts: ["STIX","TeX"]
}我们要封闭下图的公式右击菜单
也是在HTML-CSS增加设置，以下
"HTML-CSS": {
showMathMenu: false
}去掉加载信息
Mathjax.js在加载的时刻，我们能够在网页左下角看到加载状况，能够直接在MathJax.Hub.Config()里设置去掉，以下
MathJax.Hub.Config({
showProcessingMessages: false,
messageStyle: "none"
});整顿
这里我整顿两份能够整合到主题的代码，请依据本身的须要修正，简朴解释了一下
整顿一
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //封闭js加载历程信息
messageStyle: "none", //不显现信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ["$", "$"] ], //行内公式挑选$
displayMath: [ ["$$","$$"] ], //段内公式挑选$$
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], //避开某些标签
ignoreClass:"comment-content" //避开含该Class的标签
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"], //可选字体
showMathMenu: false //封闭右击菜单显现
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>整顿二
<script type="text/x-mathjax-config">
var mathId = document.getElementById("post-content"); //挑选公式辨认局限
MathJax.Hub.Config({
showProcessingMessages: false, //封闭js加载历程信息
messageStyle: "none", //不显现信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ["$", "$"] ], //行内公式挑选$
displayMath: [ ["$$","$$"] ], //段内公式挑选$$
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'] //避开某些标签
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"], //可选字体
showMathMenu: false //封闭右击菜单显现
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);
</script>
<script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>合营的css
.MathJax_Display{overflow-x:auto;overflow-y:hidden;}
.MathJax{outline:0;}InstantClick回调
代码以下
适用于整顿一的代码
<script data-no-instant>
InstantClick.on('change', function(isInitialLoad){
if (isInitialLoad === false) {
if (typeof MathJax !== 'undefined'){
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
}
});
InstantClick.init();
</script>适用于整顿二的代码
<script data-no-instant>
InstantClick.on('change', function(isInitialLoad){
if (isInitialLoad === false) {
if (typeof MathJax !== 'undefined'){
var mathId = document.getElementById("post-content");
MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);
}
}
});
InstantClick.init();
</script>结语
写了良久···
我还会再写一篇关于数学公式语法···
迎接接见我的博客：https://www.linpx.com/
