怎么使用mathjax显示公式以及常见的坑

颜酱
4,222 阅读3分钟

最近在使用 mathjax 渲染公式，踩了 n 个坑！我怎么觉得这货的文档，如此难读！

先直接体验

本地建个 html 文件，主要内容如下，然后浏览器打开

<body>
  <div>$ ( {x+a} )^{2}=\\sum ^{n}_{k=0} { ( {^{n}_{k}} ){x}^{k}{a}^{n-k}}$</div>
</body>
<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js"
></script>
<script>
  MathJax = {
    loader: {
      load: [
        'input/tex-base', // 必备基础库
        'output/chtml', // 必备基础库，用来将tex转换成html
      ],
    },
    tex: {
      tex: {
        inlineMath: [
          // inlineMath是一个数组，用来指定行内公式的起始符号和结束符号
          ['$', '$'],
          ['\\(', '\\)'],
        ],

        displayMath: [
          // displayMath是一个数组，用来指定行间公式的起始符号和结束符号
          ['$$', '$$'],
          ['\\[', '\\]'],
        ],
        // packages是一个数组，用来指定需要加载的宏包，base是必须的，其他的都是可选的
        packages: ['base'],
      },
    },
  };
</script>

mathjax1

其实简单，两步：

  • 引入
  • 配置

引入 mathjax

一般可以有两种方式：

  • 国外源：https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js，默认加载的资源就是上面的图片所示
  • 国内源：https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js，这个就是相当于将上面的资源汇总成一个了

如果需要兼容 IE11，需要加载polyfillhttps://polyfill.io/v3/polyfill.min.js?features=es6。

配置 mathjax

重要配置参数：

  • loader：是一个对象，通过参数用来指定加载的库
    • load：是一个数组，用来指定加载的库
  • tex：是一个对象，用来指定 tex 引擎的相关参数。
    • inlineMath：是一个数组，用来指定行内公式的起始符号和结束符号
    • displayMath：是一个数组，用来指定行间公式的起始符号和结束符号
    • packages：是一个数组，用来指定需要加载的宏包，base 是必须的，其他的都是可选的

报错 Undefined control sequence \xx 怎么处理

在 body 标签里，增加一段代码

<p>
  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
  $$x = {-b \pm \sqrt{\texttip{b^2-4ac}{descriminant}} \over 2a}.$$
</p>

mathjax2

发现不能显示了！报错 Undefined control sequence ...

这其实是因为，没有相关解析包造成的，解决方案就是，找到解析包配置下，就搞定了！

1. 找到相应的解析包

打开官网这个页面，Command + F，这里是不能解析texttip。

mathjax3

发现后面，对应的\texttip后面有action，这就表示需要的解析包是action。

2. load 里加解析包

load: [
  'input/tex-base', // 必备基础库
  'output/chtml', // 必备基础库，用来将tex转换成html
  '[tex]/action', // [tex]/action库包含了\require等宏，可以用来加载其他的宏包
],

3. packages 里加解析包

packages: ['base','action'],

搞定了！

mathjax4

练习：mathjax 不能显示化学方程式，\ce 之类的，怎么办

再在 body 里，加上一些代码

<div>
  $\ce{2K(s) + 2H2O(l)=2K+(aq) +2OH- (aq) +2H2(g)}\quad \Delta_rG^\ominus
  _{m,298\ce{K}}=-404.82 \ce{kJ/mol}$
</div>

mathjax5

按照上面的套路来： mathjax6

load 和 packages 相应加包：

load: [
  'input/tex-base', // 必备基础库
  'output/chtml', // 必备基础库，用来将tex转换成html
  '[tex]/action', // [tex]/action库包含了\require等宏，这个宏可以用来加载其他的宏包
  '[tex]/mhchem', // mhchem库用来输入化学方程式
]

packages: ['base', 'action', 'mhchem'],

搞定！ mathjax7

这会再加上

<div>$\ce{2H2 + O2->[点燃]H2O}$</div>

显示undefined control sequence \xrightarrow，同理查下

mathjax8

load: [
  'input/tex-base', // 必备基础库
  'output/chtml', // 必备基础库，用来将tex转换成html
  '[tex]/action', // [tex]/action库包含了\require等宏，这个宏可以用来加载其他的宏包
  '[tex]/mhchem', // mhchem库用来输入化学方程式
  '[tex]/ams', // [tex]/ams库包含了大量的数学符号和数学环境，比如\begin{align}等
],

packages: ['base', 'action', 'mhchem', 'ams'],

mathjax9

其他高阶配置

{
  showProcessingMessages: false, // 关闭js加载过程信息
  messageStyle: 'none', // 不显示信息
  showMathMenu: false, // 关闭右键菜单
  tex:{
    // ...
    tags: 'all', // tags可以取值为ams, all, none，分别表示自动编号，全部编号，不自动编号
    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'], // skipHtmlTags是一个数组，用来指定不需要处理的标签
    ignoreHtmlClass: 'htmlTag|el-tabs|ignore-bracket', // ignoreHtmlClass是一个字符串，用来指定不需要处理的类名
  }
}

v2 版本的话

官网，左下角可以切换版本。 v2 版本一般引入cdn 链接

如果需要支持其他显示，参照文档

这边加个mhchem 的云

常用配置：

MathJax.Hub.Config({
  showProcessingMessages: false, // 关闭js加载过程信息
  messageStyle: 'none', // 不显示信息
  showMathMenu: false,
  jax: ['input/TeX', 'output/PreviewHTML'],
  PreviewHTML: {
    scale: 120,
    linebreaks: { automatic: true },
  },
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ['\\\\(', '\\\\)'],
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\\\[', '\\\\]'],
    ],
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'a'],
    ignoreClass: 'htmlTag|el-tabs|ignore-bracket',
  },
  TeX: {
    equationNumbers: { autoNumber: ['AMS'], useLabelIds: true },
    extensions: ['AMSmath.js', 'AMSsymbols.js', 'extpfeil.js', 'mhchem.js'],
  },
});

MathJax.Hub.Queue(['Typeset', MathJax.Hub, xx元素]);
avatar
文章
阅读
粉丝