内容简介:之前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渲染的超长公式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数学之美 (第二版)
吴军 / 人民邮电出版社 / 2014-11 / 49.00元
几年前,“数学之美”系列文章原刊载于谷歌黑板报,获得上百万次点击,得到读者高度评价。读者说,读了“数学之美”,才发现大学时学的数学知识,比如马尔可夫链、矩阵计算,甚至余弦函数原来都如此亲切,并且栩栩如生,才发现自然语言和信息处理这么有趣。 在纸本书的创作中,作者吴军博士几乎把所有文章都重写了一遍,为的是把高深的数学原理讲得更加通俗易懂,让非专业读者也能领略数学的魅力。读者通过具体的例子学到的......一起来看看 《数学之美 (第二版)》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
正则表达式在线测试
正则表达式在线测试