MathJax行内公式怎么开启:inlineMath配置与$误触发处理

更新于

MathJax行内公式默认只认 \( 和 \) 这一对定界符,单个美元符号不在默认列表里,所以写了没反应。开启办法是在配置的 inlineMath 里加上一对美元符号:MathJax 3 写在 window.MathJax.tex 下,MathJax 2 写在 tex2jax 下。开了之后,正文里的美元金额可能被误当成公式,文末给出 3 种规避写法。两个版本的配置名字不同、位置不同,照抄时先确认自己页面加载的是哪个版本。

速查表:定界符与转义写法

写法 输入方式 效果
\(a^2+b^2\) 默认可用,不用配置 行内公式
$a^2+b^2$ inlineMath 里加了美元符号才生效 行内公式
$$ … $$ 默认可用 独立成行居中
\[ … \] 默认可用 独立成行居中
\$ 打开 processEscapes 显示一个普通美元符号
<span class="tex2jax_ignore"> 包住不想处理的文字 里面的美元符号原样显示
<code>…</code> 行内代码 默认跳过,不渲染
\frac{1}{2} 行内使用 缩小的分式
\dfrac{1}{2} 行内使用 正常大小的分式
\sum_{i=1}^{n} 行内使用 上下限挤在 ∑ 右侧
\displaystyle 放在行内公式开头 按独立公式的尺寸排
\text{元} 公式里夹中文 直立的文字

表里后五行在两个版本里写法相同,差别在美元符号、转义和忽略类名那几行的配置名。

用法:两个版本的配置代码

MathJax 3

配置对象必须在引入脚本之前定义:

<script>
  window.MathJax = {
    tex: {
      inlineMath: [["$", "$"], ["\\(", "\\)"]],
      processEscapes: true
    }
  };
</script>
<script defer src="/static/mathjax/es5/tex-chtml.js"></script>

JavaScript 字符串里反斜杠要写两个,"\\(" 才是 \(。

MathJax 2

2.x 用一个 text/x-mathjax-config 类型的脚本块写配置,放在加载 MathJax.js 那行之前:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [["$", "$"], ["\\(", "\\)"]],
      processEscapes: true
    }
  });
</script>
<script src="/static/mathjax2/MathJax.js?config=TeX-AMS_CHTML"></script>

开启后,写在文字中间的求和公式按行内尺寸排:∑ 的上下限挤到右侧,分式也缩小一号。

行内尺寸的求和公式,上下限在右侧

金额里的美元符号被误当公式:3 种规避写法

下面这句英文是典型的误触发:两个美元符号之间的文字被当成了一条公式。

<p>The ticket is $5 and the bus is $3.</p>

金额美元符号被误当公式的前后对照

  1. 用反斜杠转义:写成 \$5 和 \$3,并确认配置里 processEscapes 为 true,页面上显示普通的美元符号。
  2. 给那段文字加忽略类名:用 <span class="tex2jax_ignore"> 包住,MathJax 跳过里面的内容。3.x 对应的配置项叫 options.ignoreHtmlClass,2.x 叫 tex2jax.ignoreClass。
  3. 不开单个美元符号:站点里金额多、公式少时,干脆只用 \( 和 \) 写行内公式,从源头避开冲突。

三种规避写法在两个版本里的配置项

常见错误

  • 配置写在脚本之后:3.x 读不到配置,单个美元符号照旧不生效,把配置块挪到前面。
  • 2.x 的写法抄进 3.x:MathJax.Hub.Config 在 3.x 里已不存在,配置要改成 window.MathJax 对象。
  • 反斜杠只写一个:"\(" 在 JavaScript 里会丢掉反斜杠,行内公式整体失效。
  • Markdown 吃掉了反斜杠:博客先把 Markdown 转成 HTML 时,有的转换器会把 \( 当成转义,只留下一个圆括号,MathJax 就找不到定界符。遇到这种情况,在 Markdown 源文件里写成 \\( 与 \\),或者改用美元符号定界。
  • 动态插入的内容不渲染:页面加载后才插进来的文字,3.x 要再调用一次 MathJax.typesetPromise()。

同一条求和公式放进独立公式,或在行内开头加 \displaystyle,上下限就回到 ∑ 的正上方和正下方:

独立尺寸的求和公式:i 从 1 到 n 求和等于 n(n+1)/2

金额与公式并存的站点,三种规避写法里第 3 种最省维护:作者只需记住行内公式一律用圆括号定界。

延伸阅读

  • 网页显示数学公式:MathJax 与 KaTeX 两种接入的完整对照
  • KaTeX语法:常用命令与渲染效果速查

常见问题

为什么单个$不渲染?
MathJax 默认只认反斜杠加圆括号这一对行内定界符,不认单个美元符号,官方文档给的理由是美元符号在普通文字里太常见,容易误触发。要用它,就在配置的 inlineMath 里把一对美元符号加进去。
配置要写在脚本前面吗?
要。MathJax 3 在加载时读取 window.MathJax 这个对象,配置写在引入脚本之后就来不及了;MathJax 2 的配置块也按官方示例放在 MathJax.js 那行之前。顺序对了,刷新页面就能看到行内公式。