如何显示mathjax渲染的超长公式

起因

之前Google发邮件告诉我说我的博客存在移动设备易用性问题：内容超过了屏幕显示范围。然后就想着自己动手解决一下，本以为很简单结果还是花费了一番功夫。

谷歌警告信息

解决过程

打开它说的链接一看原来是因为有的数学公式太长了，解决方法的话就是用css让公式在水平方向浮动。把css代码往上一放问题果然得到了解决。

1
2
3
4
.formula{
  width: 100%;
  overflow-x: auto
}

浮动公式

但是还有个问题是总不能我每次markdown写公式的时候都先在外面套个div吧，虽然也不是不行但是实在太繁琐了，而且也不利于文章的迁移。看来要想个办法用JavaScript自动在公式外面套上这层div。

通过开发者工具我们可以找到mathjax生成的公式块所在的div都有“MathJax_Display"这个css类，config=TeX-AMS_HTML 是叫这个名字，其他的配置有其对应的类名可以自行查找，比如说config=TeX-AMS-SVG 对应就是MathJax_SVG_Display。最终写出来的JavaScript脚本如下所示，在console里面也测试通过了。

1
2
3
$(function () {
    $('.MathJax_Display').wrap("<div class='formula'></div>");
});

弄到这里我自以为已经完全解决这个问题了，然后就准备bundle exec jekyll server看看效果，结果发现div没有加上去。想了一下应该是因为document ready的时候mathjax还没有把公式渲染完，所以代码失效了。所以想要代码生效就需要在mathjax渲染后调用这个函数，然后我就在mathjax的文档里面找到这样一串东西，啊哈这就是我们需要的东西啦。

One of the uses of the MathJax queue is to allow you to synchronize an action with the startup process for MathJax. If you want to have a function performed after MathJax has become completely set up (and performed its initial typesetting of the page), you can push it onto the MathJax.Hub.queue so that it won’t be performed until MathJax finishes everything it has queued when it was loaded. For example,

1
2
3
4
5
6
<script type="text/javascript" src="/MathJax/MathJax.js"></script>
<script>
  MathJax.Hub.Queue(function () {
    // ... your startup commands here ...
  });
</script>

所以修改后的JavaScript代码就变成下面这个样子了，测试一下效果挺好的，这个问题就算解决了。

1
2
3
MathJax.Hub.Queue(function () {
    $('.MathJax_Display').wrap("<div class='official'></div>");
});

参考资料

  1. https://docs.mathjax.org/en/v2.7-latest/advanced/queues.html