markdown - 轻松解决 MathJax 和 Markdown 中的下划线问题？

Question

我知道已经有很多关于此问题的问题，但我还没有找到任何具体回答我的问题的问题。

我正在使用 Jekyll (AcademicPages) 构建一个网站。我有好几页都是数学表达式，由于 Markdown 和 Jekyll 之间的交互，下划线的表现很糟糕。

我知道这可以通过转义下划线来(部分)解决，但我无法对整个页面执行此操作。

可以在我的测试站点 here 上看到一个示例。这是该页面的 markdown 文件:

---
title: "Testing"
collection: archive
type: "Type"
permalink: /testing
excerpt: ""
---

Main paragraph underscore $\operatorname{ext}_\in(X) = \operatorname{ext}_\in(\emptyset)$.
<ol>
<li>Item underscores $\operatorname{ext}_\in(X) = \operatorname{ext}_\in(\emptyset)$.</li>
</ol>
    
$$
\operatorname{ext}_\in(X) = \operatorname{ext}_\in(\emptyset)
$$


Main paragraph underscore $\operatorname{ext}\_\in(X) = \operatorname{ext}\_\in(\emptyset)$.
<ol>
<li>Item underscores $\operatorname{ext}\_\in(X) = \operatorname{ext}\_\in(\emptyset)$.</li>
</ol>
    
$$
\operatorname{ext}\_\in(X) = \operatorname{ext}\_\in(\emptyset)
$$

页面的前半部分使用 _而页面的后半部分使用 \_ .

• 在页面的前半部分，主段落中的下划线渲染得很糟糕。
• 在后半部分，列表元素和数学环境中的下划线渲染得很糟糕。

由于我的页面比我的测试页面长得多，我想知道是否有一种简单的方法可以解决此问题，而不必在页面渲染不良的部分手动转义下划线。

我尝试过但没有成功的一些方法:

1. 推杆{% raw %}和{% endraw %}分别位于正文的开头和结尾。页面没有任何变化。

2. 推杆<span>和</span>围绕 $...$ 形式的所有表达式。它修复了文本周围的格式，但下划线仍然从数学表达式中消失。

3. 推杆<div>和</div>围绕 $...$ 形式的所有表达式。它什么也不做。

Answer 1

我发现您正在使用 MathJax v2.7.4，因此您可能需要更新到版本 2.7.9，这是最高的 v2 版本(恐怕该版本中的 latest.js 不再正常工作，所以你得到的是 2.7.4 版本)。如果可以的话，更新到版本 3 会更好。

这是一个允许您使用 `$...$` 的配置和`$$...$$`界定内联和显示的数学(注意美元符号周围的反引号)。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    skipTags: ["script","noscript","style","textarea"],
    inlineMath: [['$', '$'], ['`$', '$`'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['`$$', '$$`'], ['\\[', '\\]']]
  }
});
MathJax.Hub.Register.LoadHook("[MathJax]/extensions/tex2jax.js", function () {
  var TEX2JAX = MathJax.Extension.tex2jax;
  TEX2JAX._createMathTag = TEX2JAX.createMathTag;
  TEX2JAX.createMathTag = function (mode, tex) {
    const math = this._createMathTag(mode, tex);
    const code = math.parentNode;
    if (code.nodeName === 'CODE' && code.childNodes.length <= 3) {
      const span = document.createElement('mjx-span');
      code.parentNode.replaceChild(span, code);
      span.appendChild(math);
    }
    return math;
  };
});
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML" defer></script>

它负责删除 <code>我提到的标签，并且还从不同的 CDN 获取 MathJax，您可以在其中更轻松地请求最高版本 2 版本。

我不确定您需要如何为此配置 Jekyll，但您应该能够提供自定义配置，并且可能能够替换用于 MathJax 的实际 URL，因此应该能够将其集成到您的网站。

如果你想使用版本3，下面是相应的配置:

<script>
MathJax = {
  removeCode(math, doc) {
    const code = math.start.node.parentNode;
    if (code.nodeName === 'CODE' && code.childNodes.length === 1) {
      const span = document.createElement('mjx-span');
      code.parentNode.replaceChild(span, code);
      span.appendChild(code.firstChild);
    }
  },
  options: {
    skipHtmlTags: {'[-]': ['code', 'pre']},
    renderActions: {
      removeCode: [
        11,
        (doc) => {for (const math of MathJax.startup.document.math) MathJax.config.removeCode(math, doc)},
        (math, doc) => MathJax.config.removeCode(math, doc),
        false
      ]
    }
  },
  tex: {
    inlineMath: [['$', '$'], ['`$', '$`'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['`$$', '$$`'], ['\\[', '\\]']]
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" defer id="MathJax-script"></script>

所以你的测试页面(使用这些配置中的任何一个)看起来像

Main paragraph underscore `$\operatorname{ext}_\in(X) = \operatorname{ext}_\in(\emptyset)$`.
<ol>
<li>Item underscores `$\operatorname{ext}_\in(X) = \operatorname{ext}_\in(\emptyset)$`.</li>
</ol>