KaTeX 带来的布局错误与修正

前几天，我在 我的博客 中引入了 $\LaTeX$ 数学公式渲染功能，是使用 KaTeX 库实现的。但是引入这个库后我发现，凡是渲染了数学公式的博客，布局都会出现问题，如下图所示。

设计的布局应该只出现左边的滚动条，而由于页面高度始终为 100vh，不应该出现右边的滚动条。对于没使用公式的博文，布局都是正常的。

问题排查

由于只有在引入了公式的博文中才会出现这个问题，我们首先尝试隐藏所有公式，看看能不能解决这个问题。

跟踪公式，可以发现其 html 元素为

于是，我们首先在博客正文的渲染组件的样式中加入这样的样式将其隐藏，看看能不能解决布局问题。

/deep/ span.katex {
    display: none;
}

刷新后，右边的滚动条确实不在了，页面布局恢复了正常。这说明，确实是公式破坏了布局设计。但是这样做公式自然全部隐藏了，伤敌一千自损八百。为了在正常显示公式的同时修复我们的布局，我们再展开详细观察这两个子元素 span.katex-mathml 和 span.katex-html 。容易发现，前者的属性为 position:absolute，而且去掉并不会影响公式的显示。这正是破坏我们布局的元凶。将样式调整为如下以将其隐藏：

/deep/ span.katex-mathml {
    display: none;
}

隐藏该子元素后，页面布局再次恢复正常，而且公式正常显示。

问题原因及解决

问题来源找到了，那这个 span.katex-mathml 究竟起到了什么作用？为什么要渲染一个不显示的公式？翻阅 katex 的文档，我们可以在 这里 找到解释：默认的 output 选项是 htmlAndMathml，它会同时渲染 html 类型的公式和 mathml 类型的公式；前者用来视觉展示，后者用来进行 accessibility（无障碍浏览，屏幕阅读器可以朗读出来）。这也就解释了为什么 katex 会渲染一个正常不可见的元素。

在这里，为了避免布局错误，我只能忍痛去掉 mathml 类型的渲染了。在 katex 的选项中加上

output: "html"

至此，布局恢复正常，而我们仅仅修改了一行代码。