内容简介:之前Google发邮件告诉我说我的博客存在移动设备易用性问题:内容超过了屏幕显示范围。然后就想着自己动手解决一下,本以为很简单结果还是花费了一番功夫。打开它说的链接一看原来是因为有的数学公式太长了,解决方法的话就是用css让公式在水平方向浮动。把css代码往上一放问题果然得到了解决。
起因
之前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>"); });
参考资料
以上所述就是小编给大家介绍的《如何显示mathjax渲染的超长公式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图解Java多线程设计模式
[日] 结城浩 / 侯振龙、杨文轩 / 人民邮电出版社 / 2017-8 / 89.00元
本书通过具体的Java 程序,以浅显易懂的语言逐一说明了多线程和并发处理中常用的12 种设计模式。内容涉及线程的基础知识、线程的启动与终止、线程间的互斥处理与协作、线程的有效应用、线程的数量管理以及性能优化的注意事项等。此外,还介绍了一些多线程编程时容易出现的失误,以及多线程程序的阅读技巧等。在讲解过程中,不仅以图配文,理论结合实例,而且提供了运用模式解决具体问题的练习题和答案,帮助读者加深对多线......一起来看看 《图解Java多线程设计模式》 这本书的介绍吧!