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

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

MathJax简介

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

引入MathJax

在页脚处,引入官方的cdn

<script src="//www.90168.org 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.mathjax.org" />

外联config说明

我们引入MathJax,发现链接后面多了个?config=TeX-AMS-MML_HTMLorMML

这个多出来的东西其实是告诉MathJax,我们要用到的叫TeX-AMS-MML_HTMLorMML.js的配置文件,其用来控制显示数学公式的HTMl显示输出

这个配置文件其实也可以通过cdn获取,官方例子如下

<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>

可惜BootCDN并没有提供这个js,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

http://docs.mathjax.org/en/la...

内联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 ane0, there are two solutions to (ax2+bx+c=0)

那么displayMath就是识别整个独立段落的数学公式并且居中显示,我们可以通过$$ ... $$\[ ... ])新视觉影院6080去识别这种数学公式

效果如下:

x=−bpmsqrtb2−4acover2a

在中文世界里,我们往往喜欢用()或者[]去备注或者圈住重要的字段,所以在一般情况下我们并不需要\( ... \)\[ ... ])去识别公式

但也会有遇到两个$$的情况造成误伤,别急,先看完,你就知道怎么解决了

区域选择性识别

约束识别范围

我们的数学公式通常是在文章里,那么如何实现只在文章的标签对里面去做公式识别,如下

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.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,
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"
},
"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,
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"
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"],
showMathMenu: false
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub,mathId]);
</script>
<script src="//www.bsck.org cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

修复与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>

前端整合MathjaxJS的配置笔记的更多相关文章

  1. springmvc(二) ssm框架整合的各种配置

    ssm:springmvc.spring.mybatis这三个框架的整合,有耐心一步步走. --WH 一.SSM框架整合 1.1.整合思路 从底层整合起,也就是先整合mybatis与spring,然后 ...

  2. Bandwidthd+Postgresql数据库配置笔记

    Bandwidthd+Postgresql数据库配置笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. http://blog.csdn.net/zjianbo/article/detai ...

  3. 软件安装配置笔记(三)——ArcGIS系列产品安装与配置(补档)(附数据库连接及数据导入)

    在前两篇安装配置笔记之后,就忘记把其他安装配置笔记迁移过来了,真是失误失误!趁现在其他文档需要赶紧补上. 目录: 一.ArcMap 二.ArcMap连接数据库并导入数据 三.Arcgis Pro 四. ...

  4. linux文件权限目录配置笔记

    ###linux 文件权限目录配置笔记 ---------- 多人多任务环境 linux 一般将文件可存取的身份分为三个类别:owner group others Permission deny ls ...

  5. php +apache +mysql 配置笔记

    2013年11月5日 14:27:46 php +apache +mysql 配置笔记 mysql 正常安装 忽略. 1,配置笔记:安装apache 的成功标志是:安装完成之后,在浏览器输入http: ...

  6. Linux下Ganglia集群监控安装、配置笔记

    http://www.blogjava.net/henry14/archive/2011/12/17/ganglia.html 枪声依旧 Linux下Ganglia集群监控安装.配置笔记 Gangli ...

  7. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  8. Matplotlib外观和基本配置笔记

    title: matplotlib 外观和基本配置笔记 notebook: Python tags:matplotlib --- 参考资料,如何使用matplotlib绘制出数据图形,参考另一篇mat ...

  9. logging模块配置笔记

    logging模块配置笔记 log文件的路径 #判断在当前的目录下是否有一个logs文件夹.没有则创建 log_dir = os.path.dirname(os.path.dirname(__file ...

随机推荐

  1. Python 学习笔记(十)Python集合(一)

    回顾 int/float/str/list/tuple/dict 整数型和浮点型是不可变的,不是序列 字符串是不可变的,是序列 列表是可变的,是序列 元组是不可变的,是序列 字典是可变得,但不是序列 ...

  2. 在CentOS7上安装MySQL5.7-YUM源方式

    获取RPM包 # wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 列出RPM包里都有哪些文件 # ...

  3. 使用PLSQL客户端登录ORACLE时报ORA-12502和ORA-12545错误的解决方案

    当使用plsqldev客户端登录oracle数据库时,如果对应的tnsnames.ora中是直接使用IP地址来连接,并且未在系统的hosts文件中绑定主机名时,极易出现ORA-12502及ORA-12 ...

  4. Ubantu 更新时间方法

    1.首先查看时区: swfsadmin@swfsubuntu:~$ date -RTue, 17 Dec 2013 18:23:01 +0800 如果要修改时区,执行sudo tzselect 2.选 ...

  5. sqlserver 导出数据库表结构

    https://www.cnblogs.com/miaomiaoquanfa/p/6909835.html SELECT 表名 = case when a.colorder=1 then d.name ...

  6. 百度地图定位JSP代码

    附:百度地图API:http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a1b0?qq-pf-to=pcqq.c2c &l ...

  7. Redis(五):Redis的持久化

    Redis的持久化目录导航: 总体介绍 RDB(Redis DataBase) AOF(Append Only File) 总结(Which one) 总体介绍 官网介绍 RDB(Redis Data ...

  8. Linux-3.5-Exynos4412驱动分层分离

    linux-3.5/Documentation/driver-model/bus.txt 先写一个简单的例子,是为了给学习platform做准备. dev.h #ifndef JASON_DEV_H_ ...

  9. linux使用logrotate工具管理日志轮替

    对于Linux系统安全来说,日志文件是极其重要的工具.logrotate程序是一个日志文件管理工具.用于分割日志文件,删除旧的日志文件,并创建新的日志文件,起到"转储"作用.可以节 ...

  10. 『Python基础-9』元祖 (tuple)

    『Python基础-9』元祖 (tuple) 目录: 元祖的基本概念 创建元祖 将列表转化为元组 查询元组 更新元组 删除元组 1. 元祖的基本概念 元祖可以理解为,不可变的列表 元祖使用小括号括起所 ...