如何使MathJax方程在href中正确呈现？-解网

问：

我想制作一个包含方程式的超链接。我正在使用 MathJax 作为方程式。包含公式的链接部分不带下划线。

下面是一个最小的示例：

<!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>

</head>
<body>
<a href="some link">Hello world \(2 + 2 =4\) (note that the equation is not underlined)</a>
</body>
</html>

下面是它的样子：

HTML css href mathjax mathml

在数学方程式下划线并不容易，因为如果它们包含下标，它们可能会大大低于基线。浏览器只有在对链接的其余部分进行排版后才对等式进行排版，因此在绘制下划线时，它还不知道等式将低于基线多少。为了安全起见，它根本不强调方程式。（请注意，下划线也有一个间隙，其中“q”下降到基线以下。

您可以根据具体情况决定将下划线降低多远。以下示例通过使用填充和底部的边框来实现此目的（您可能需要不同的颜色来指示是否已访问过该链接）。a:visited

a { text-decoration: none; border-bottom: solid 1px blue; }
a#e2 { padding-bottom: 2px; }

<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>
<a id="e1" href="some link">Hello world \(2 + 2 = 4\) (note that the equation is now underlined)</a>
<a id="e2" href="some link">Hello world \(\log_2(2 + 2) = 2\) (note that the equation is now underlined)</a>

上一个：Stack Exchange 中的 Mathjax 多行方程渲染问题

下一个：Mathjax 无法在 github 上正确呈现 pmatrix

如何使MathJax方程在href中正确呈现？

How to make MathJax equation render properly in href?

评论