前端整合MathjaxJS的配置笔记

时间  2019-11-08
标签 前端 整合 mathjaxjs 配置 笔记 繁體版
原文   原文链接

这篇文章是我给Pinghsu主题添加数学公式功能的一个小教程，包含我大量的官方文档阅读后的实践，跟着这篇配置教程走，你能够作到给任何一个须要数学公式的站点添加支持。javascript

教程如标题所述是针对 Mathjax 的实践，我简单了解一下 KaTex ，也是个不错的选择。css

MathJax简介

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax能够方便的在浏览器中显示数学公式，不须要使用图片。目前，MathJax能够解析Latex、MathML和ASCIIMathML的标记语言。(Wiki)html

引入MathJax

在页脚处，引入官方的cdnjava

<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

官方cdn的js在国内访问慢，因此咱们通常引入的是国内的公共资源cdn提供的js,这里特别感谢BootCDNgit

<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，用于网页加速，了解更多能够访问我另一篇文章：heregithub

<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显示输出post

这个配置文件其实也能够经过指定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进行加速fetch

下面是官方更详细的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

美化数学公式

去掉蓝框

outline-gongshi-12312476781.png

上图所示的是，点击该公式时周围有一圈蓝色的边框，咱们能够经过添加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"]
}

咱们要关闭下图的公式右击菜单

gongshi-caidan-123579702.png

也是在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/

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程