经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
MathJax: 让前端支持数学公式
来源:cnblogs  作者:GodBMW  时间:2018/10/8 8:48:36  对本文有异议

文章图片存储在GitHub,网速不佳的朋友,请看《MathJax:让前端支持数学公式》 或者 来我的技术小站 godbmw.com

1. 必须要说

1.1 开发背景

博主使用Vue开发的个人博客,博文使用markdown语法编写,然后交给前端渲染。为了更方便的进行说明和讲解,需要前端支持LaTex的数学公式,并且渲染好看的样式

1.2 效果展示

数学公式分为行内公式和跨行公式,当然都需要支持和渲染。

我准备了3条公式,分别是行内公式、跨行公式和超长的跨行公式:

  1. $\alpha+\beta=\gamma$
  2.  
  3. $$\alpha+\beta=\gamma$$
  4.  
  5. $$\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}\int_{0}^{1}f(x)dx \sum_{1}^{2}$$

这篇测试文章的地址是:https://godbmw.com/passage/12。效果图如下所示:

2. 使用MathJax

2.1 引入CDN

在使用MathJax之前,需要通过CDN引入, 在<body>标签中添加:
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>

2.2 配置MathJax

将MathJax的配置封装成一个函数:

  1. let isMathjaxConfig = false; // 防止重复调用Config,造成性能损耗
  2.  
  3. const initMathjaxConfig = () => {
  4.   if (!window.MathJax) {
  5.     return;
  6.   }
  7.   window.MathJax.Hub.Config({
  8.     showProcessingMessages: false, //关闭js加载过程信息
  9.     messageStyle: "none", //不显示信息
  10.     jax: ["input/TeX", "output/HTML-CSS"],
  11.     tex2jax: {
  12.       inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
  13.       displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
  14.       skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
  15.     },
  16.     "HTML-CSS": {
  17.       availableFonts: ["STIX", "TeX"], //可选字体
  18.       showMathMenu: false //关闭右击菜单显示
  19.     }
  20.   });
  21.   isMathjaxConfig = true; // 
  22. };

2.3 使用MathJax渲染

MathJax提供了window.MathJax.Hub.Queue来执行渲染。在执行完文本获取操作后,进行渲染操作:

  1. if (isMathjaxConfig === false) { // 如果:没有配置MathJax
  2.   initMathjaxConfig();
  3. }
  4.  
  5. // 如果,不传入第三个参数,则渲染整个document
  6. // 因为使用的Vuejs,所以指明#app,以提高速度
  7. window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);

2.4 修改默认样式

MathJax默认样式在被鼠标focus的时候,会有蓝色边框出现。对于超长的数学公式,x方向也会溢出。

添加以下样式代码,覆盖原有样式,从而解决上述问题:

  1. /* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */
  2. .mjx-chtml {
  3.   outline: 0;
  4. }
  5. .MJXc-display {
  6.   overflow-x: auto;
  7.   overflow-y: hidden;
  8. }

3. 注意事项

3.1 不要使用npm

不要使用npm,会有报错,google了一圈也没找到解决方案,github上源码地址有对应的issue还没解决

博主多次尝试也没有找到解决方法,坐等版本更新和大神指点。

3.2 动态数据

在SPA单页应用中,数据是通过Ajax获取的。此时,需要在数据获取后,再执行渲染

如果习惯es5,可以在回调函数中调用window.MathJax.Hub.Queue。但是更推荐es6,配合Promiseasync/await来避免“回调地域”。

3.3 版本问题

对于不同版本或者不同CDN的MathJax,第二部分的样式覆盖的class名称不同。比如在cdnbootv2.7.0版本中,样式覆盖的代码应该是下面这段:

  1. /* MathJax v2.7.0 from 'cdn.bootcss.com' */
  2. .MathJax {
  3.   outline: 0;
  4. }
  5. .MathJax_Display {
  6.   overflow-x: auto;
  7.   overflow-y: hidden;
  8. }

4. 更多资料

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号