基于MathJax渲染数学公式

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

一、引入MathJax

在页脚处，引入CDN

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>

但这个js还是会调用到 cdn.mathjax.org 里的一些配置js文件，我们最好在head内加一个dns-prefetch，用于网页加速，了解更多可以访问我另外一篇文章：here

<link rel="dns-prefetch" href="//cdn.mathjax.org" />

二、识别公式配置

基础配置

<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: [ ['$$','$$'], ["\\[","\\]"] ],	// 行间公式同理
          processEscapes: true,							// 是否允许使用\$来escape一些信息
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code', 'a', 'annotation', 'annotation-xml'],	// 不渲染这些标签内的东西
          ignoreClass: 'comment-content'			// 设置具有哪些cssclass的标签不用tex2jax预处理
        },
        TeX: {extensions: ["AMSmath.js","AMSsymbols.js","extpfeil.js","mhchem.js"]},
        "HTML-CSS": {									// 处理HTML/CSS输出的配置
          availableFonts: ["STIX","TeX"],		// 可用字体
          showMathMenu: false					// 不显示右键菜单
        },
        CommonHTML: {
          styles: {".mjx-ex-box-test": {overflow: "hidden"}} 	
        }
      });
    </script>

其它修改（按需）

# 去掉蓝色边框: 添加CSS
.MathJax{
  outline:0;
}

# 修改字体大小: 添加CSS
.MathJax span{
  font-size:15px;
}

三、使用触发

在需要的地方调用函数

<script>
  function aaaaa(){
  	// 渲染公式原始数据到页面
  	// ...........
  
  	// 方法一：全页面渲染
  	MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  
  	// 方法二：按照id局部渲染
  	var testDiv = document.getElementById("test");
  	MathJax.Hub.Queue(["Typeset",MathJax.Hub, testDiv]);
  }
</script>