时间戳

首页 > 解决方案 > MathJax 自动换行不起作用

javascript - MathJax 自动换行不起作用

问题描述

我正在使用 MathJax 在我的网页中显示数学。这就是我加载和配置它的方式：

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": { fonts: ["TeX"], linebreaks: { automatic: true } }
  });
</script>
<script src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

该脚本作为最后一个条目放置在<body>. 在此之前，我有一些（长）数学方程式，例如：

<body>
$$
    a + b + c + d + \int_a^b f(x)dx - \sum_k c_k\int g(x)dx = \prod_n \int_{\Omega_k} F(x,y,z) d\omega
$$ 
...

问题

当我加载页面时，它会很好地呈现方程。但是，当我将页面大小设置为非常窄并刷新/加载页面时；该等式未以适合页面的方式呈现。

MathJax 文档指出可linebreaks: { automatic: true }用于自动中断长表达式。为什么这不起作用？

现场演示：我发布了CodePen 演示。

故障排除

我也发现了类似这个问题的类似问题。那里的 CodePen 有效，我不明白为什么我的代码不起作用。

标签： javascripthtmlmathjax

解决方案

问题源于您的内联配置与 MathJax 一起加载的组合配置文件（通过查询字符串）不一致。

内联，您正在设置 HTML-CSS 输出以及自动换行符。但是，组合配置文件会加载 CommonHTML 输出。

配置的最后一次更新来自组合配置文件，因此您最终会得到 CommonHTML 输出（您可以通过 MathJax 上下文菜单进行检查，也可以在此处切换到 HTML-CSS —— 注意：这会设置一个 cookie）。

因此，您可以更新内联配置或切换组合配置。

我建议使用 CommonHTML 输出，它比现在非常古老的 HTML-CSS 输出（它是在 IE8 新时设计的）更新和更快。-full如果您知道要呈现内容，您还可以添加到查询字符串以获得更大的有效负载（否则 MathJax 在加载更多组件之前首先查找内容）。

body { width: 10em}
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "CommonHTML": { linebreaks: { automatic: true } }
  });
</script>
<script src="//mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

$$
    a + b + c + d + \int_a^b f(x)dx - \sum_k c_k\int g(x)dx = \prod_n \int_{\Omega_k} F(x,y,z) d\omega
$$

推荐阅读