MathML笔记MathML是一种基于XML的，在互联网上书写数学符号和公式的语言。大部分浏览器都支持MathML标签，

了解MathML

MathML是一种基于XML的，在互联网上书写数学符号和公式的语言。大部分浏览器都支持MathML标签，如果您的浏览器不支持该标签，可以使用最新版的Firefox或Safari浏览器。对应的标签是 ... </ math>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鸟教程(runoob.com)</title>
   </head>
   <body>
	
      <math xmlns="http://www.w3.org/1998/Math/MathML">
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
      </math>
		
   </body>
</html>

上面的代码输出为 a2 + b2 = c2

MathJax

1、MathJax使用网络字体（大部分浏览器都支持）去产生高质量的排版，使其在所有分辨率都可缩放和显示，这远比使用包含公式的图片要有效得多。 2、使用MathJax显示数学公式是基于文本的，而非图片。它可以被搜索引擎使用，这意味着方程式和页面上的文字一样是可以被搜索的 3、MathJax允许页面作者使用LaTeX符号和 MathML写公式

MathJax原理

在HTML5里出了我们常用的 div, span, a, h1 等标签外，还允许开发人员自定义浏览器标签，但是自定义标签按照约定必须以“-”分割，例如，你也可以自定义标签：，但是不推荐用，这主要是为了方便浏览器解析，防止和现有的标签冲突等。

Mathjax通过自定义标签，然后给标签设置class属性，利用字体显示字符，所以你看到“b”不是字母“b”，而是一个矢量图形。

配置

默认情况下，MathJax 使用 ( 和 ) 作为行内公式的开始和结束但是，你也可以自定义配置，如下使用和作为公式的开始和结束。

但是，不推荐使用是因为，是美元符号，这会导致 “这个苹果5元，那个苹果6元”,结果系统把$之间的内容当成了公式了。

请注意：和其它系统不同，对于Mathjax的配置，是直接定义一个MathJax对象，然后设置其属性。

<script>
<strong>MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};</strong>
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

一些重要配置

MathJax = {
  options: {
    skipHtmlTags: [           
        'script', 'noscript', 'style', 'textarea', 'pre',
        'code', 'annotation', 'annotation-xml'
    ],
    includeHtmlTags: {        
        br: '\n', wbr: '', '#comment': ''
    },
    ignoreHtmlClass: 'tex2jax_ignore',  
    processHtmlClass: 'tex2jax_process',  
    compileError: function (doc, math, err) {doc.compileError(math, err)},
    typesetError: function (doc, math, err) {doc.typesetError(math, err)},
    renderActions: {...}
  }
};

skipHtmlTags配置可以让Mathjax忽略一些标签，例如当你用包含一些公式时，可能希望MaxJax不把其中的公式进行解析。

includeHtmlTags 可以配置在数学公式里可以出现哪些标签，例如公式里出现 n可用于换行等。

ignoreHtmlClass：可以设置忽略一些class

processHtmlClass：可以设置处理class。

在这个demo里，插入数学公式时使用了如下配置：

let className = 'math-tex';
MathJax = {
  options: {
    processHtmlClass: className,
    ignoreHtmlClass: '.*'
  }
};

也就是只处理 class为 math-tex 的标签。