如何顯示mathjax渲染的超長公式

起因

之前Google發郵件告訴我說我的博客存在移動設備易用性問題：內容超過了屏幕顯示範圍。然後就想着自己動手解決一下，本以爲很簡單結果還是花費了一番功夫。

解決過程

打開它說的鏈接一看原來是因爲有的數學公式太長了，解決方法的話就是用css讓公式在水平方向浮動。把css代碼往上一放問題果然得到了解決。

.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裏面也測試通過了。

$(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,

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

所以修改後的JavaScript代碼就變成下面這個樣子了，測試一下效果挺好的，這個問題就算解決了。

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

參考資料

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

博客原文：如何顯示mathjax渲染的超長公式