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

栏目: IT技术 · 发布时间: 4年前

内容简介:之前Google发邮件告诉我说我的博客存在移动设备易用性问题:内容超过了屏幕显示范围。然后就想着自己动手解决一下,本以为很简单结果还是花费了一番功夫。打开它说的链接一看原来是因为有的数学公式太长了,解决方法的话就是用css让公式在水平方向浮动。把css代码往上一放问题果然得到了解决。

起因

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

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

解决过程

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

.formula{
  width: 100%;
  overflow-x: auto
}

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

但是还有个问题是总不能我每次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渲染的超长公式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

An Introduction to the Analysis of Algorithms

An Introduction to the Analysis of Algorithms

Robert Sedgewick、Philippe Flajolet / Addison-Wesley Professional / 1995-12-10 / CAD 67.99

This book is a thorough overview of the primary techniques and models used in the mathematical analysis of algorithms. The first half of the book draws upon classical mathematical material from discre......一起来看看 《An Introduction to the Analysis of Algorithms》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具