如何让MathJax公式在href链接中正确渲染并显示下划线

问题本质 #

链接的下划线由text-decoration: underline实现，但MathJax渲染公式时会生成独立的DOM元素（如<span class="mjx-chtml">），这类元素默认不会继承父链接的下划线样式，导致公式部分无下划线。

解决方案 #

方案1：CSS强制继承下划线 #

在页面<style>中添加样式，让MathJax生成的元素继承父元素文本装饰：

a .mjx-chtml {
  text-decoration: inherit;
}

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        a .mjx-chtml {
            text-decoration: inherit;
        }
    </style>
</head>
<body>
<a href="some link">Hello world \(2 + 2 =4\) (note that the equation is not underlined)</a>
</body>
</html>

方案2：通过MathJax配置继承样式 #

在加载MathJax前添加配置脚本，直接指定公式元素继承文本装饰：

<script>
MathJax = {
  chtml: {
    styles: {
      '.mjx-chtml': {
        textDecoration: 'inherit'
      }
    }
  }
};
</script>

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script>
        MathJax = {
          chtml: {
            styles: {
              '.mjx-chtml': {
                textDecoration: 'inherit'
              }
            }
          }
        };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<a href="some link">Hello world \(2 + 2 =4\) (note that the equation is not underlined)</a>
</body>
</html>

效果说明 #

两种方案均可让链接内的MathJax公式显示下划线，与普通文本样式统一。方案1简洁直接，通过全局CSS生效；方案2借助MathJax自身配置，适合需要精细化调整公式样式的场景。

内容的提问来源于stack exchange，提问作者Rodion Zaytsev