MathJax: 让前端支持数学公式
文章图片存储在GitHub
,网速不佳的朋友,请看《MathJax:让前端支持数学公式》 或者 来我的技术小站 godbmw.com
1. 必须要说
1.1 开发背景
博主使用Vue
开发的个人博客,博文使用markdown
语法编写,然后交给前端渲染。为了更方便的进行说明和讲解,需要前端支持LaTex
的数学公式,并且渲染好看的样式。
1.2 效果展示
数学公式分为行内公式和跨行公式,当然都需要支持和渲染。
我准备了3条公式,分别是行内公式、跨行公式和超长的跨行公式:
$\alpha+\beta=\gamma$$$\alpha+\beta=\gamma$$$$\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的配置封装成一个函数:
let isMathjaxConfig = false; // 防止重复调用Config,造成性能损耗const initMathjaxConfig = () => {if (!window.MathJax) {return;}window.MathJax.Hub.Config({showProcessingMessages: false, //关闭js加载过程信息messageStyle: "none", //不显示信息jax: ["input/TeX", "output/HTML-CSS"],tex2jax: {inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签},"HTML-CSS": {availableFonts: ["STIX", "TeX"], //可选字体showMathMenu: false //关闭右击菜单显示}});isMathjaxConfig = true; //
};
2.3 使用MathJax渲染
MathJax提供了window.MathJax.Hub.Queue
来执行渲染。在执行完文本获取操作后,进行渲染操作:
if (isMathjaxConfig === false) { // 如果:没有配置MathJaxinitMathjaxConfig();
}// 如果,不传入第三个参数,则渲染整个document
// 因为使用的Vuejs,所以指明#app,以提高速度
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);
2.4 修改默认样式
MathJax
默认样式在被鼠标focus
的时候,会有蓝色边框出现。对于超长的数学公式,x方向也会溢出。
添加以下样式代码,覆盖原有样式,从而解决上述问题:
/* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */
.mjx-chtml {outline: 0;
}
.MJXc-display {overflow-x: auto;overflow-y: hidden;
}
3. 注意事项
3.1 不要使用npm
不要使用npm,会有报错,google了一圈也没找到解决方案,github上源码地址有对应的issue
还没解决。
博主多次尝试也没有找到解决方法,坐等版本更新和大神指点。
3.2 动态数据
在SPA单页应用中,数据是通过Ajax
获取的。此时,需要在数据获取后,再执行渲染。
如果习惯es5
,可以在回调函数中调用window.MathJax.Hub.Queue
。但是更推荐es6
,配合Promise
和async/await
来避免“回调地域”。
3.3 版本问题
对于不同版本或者不同CDN的MathJax
,第二部分的样式覆盖的class
名称不同。比如在cdnboot
的v2.7.0
版本中,样式覆盖的代码应该是下面这段:
/* MathJax v2.7.0 from 'cdn.bootcss.com' */
.MathJax {outline: 0;
}
.MathJax_Display {overflow-x: auto;overflow-y: hidden;
}
4. 更多资料
- 前端整合MathjaxJS的配置笔记
- Mathjax官网
- Mathjax中文文档
转载于:https://www.cnblogs.com/geyouneihan/p/9743302.html
MathJax: 让前端支持数学公式相关推荐
- python mathjax_MathJax: 让前端支持数学公式
文章图片存储在GitHub,网速不佳的朋友,请看<MathJax:让前端支持数学公式> 或者 来我的技术小站 godbmw.com 1. 必须要说 1.1 开发背景 博主使用Vue开发的个 ...
- 安卓电视版linux,MythTV 30.0 发布,前端支持选择Android电视设备
自从上次MythTV上报道以来,已经有一段时间了.MythTV曾经是开源DVR/PVR非常常见的HTPC软件,但现在考虑到所有的互联网流媒体和点播视频平台,这种需求已经减少了.这个月,该项目发布了My ...
- NextCloud前端支持播放mov文件
默认情况下,NextCloud网盘是不支持播放 .mov文件的. 通过修改前端代码就可以实现. 如下 1 找到 apps/files_videoplayer/js/viewer.js 文件 2 搜索 ...
- 图片转换为 latex 公式,识别图片中Latex公式,支持数学公式,化学公式,物理公式和生物公式,附Java代码和测试效果
目 录 1.编写Java代码实现识别图片中Latex公式 2.测试结果 3.源码下载 1.编写Java代码实现识别图片中Latex公式 直接上代码: public static String se ...
- Everyday-FE-Articles 8~11月前端文章日推 [持续更新]
Everyday-FE-Articles 由来自@阿里马跃的每日文章推荐,于是顺手整理,以便学习... -- By Ale-cc /* 注:序号不准确 */ 八月份 8月7日 星期二,农历六月廿六 S ...
- 客房软件_客房内部如何运作?
客房软件 Note: This article is part of the advanced Room series which covers all the details about the R ...
- hexo支持mathjax
新博客:https://yinl.fun 欢迎关注,同步更新 技术博客有时避免不了一些数学公式,利用Hexo建立博客后,最开始利用Google的公式库,但是得请求Google的网址,有时会被墙,所以不 ...
- hexo博客next主题添加对数学公式的支持
hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...
- Java笔记-spring boot支持jsp文件做前端页面
目录 基本概念 代码与实例 基本概念 很多页面再用themleaf,但也有些网站使用的JSP页面,这里在spring boot中配置jsp前端支持有如下逻辑. 添加Maven依赖,配置applicat ...
最新文章
- android 默认中文时区,修改android默认系统语言为中文和时区
- hdfs 数据迁移_基于JindoFS+OSS构建高效数据湖
- CentOS7 设置用户密码规则
- Gulp 之图片压缩合并
- Opencv中三种操作像素的方法
- lisp 中望cad 选项卡_这些高效插件,学CAD的基本用过两种以上
- Logistic Regression 之 Sigmoid
- mysql在windows配置多节点_mysql基础--windows下的多实例配置
- 编码器z相 C语言代码,编码器的Z相是什么?
- springboot幂等性_springboot + redis + 注解 + 拦截器 实现接口幂等性校验
- 平方矩阵——3种思路
- dism 分割镜像_2019系统教程,如何拆分WIM镜像里面多余的子映像、控制体积-映像文件怎么打开...
- 富友支付富掌柜智能收银系统是怎样的一套系统
- sqlmap注入命令大全
- 不用ps如何批量修改图片尺寸?教你一个方法
- Python通过Socket实现QQ聊天功能
- html5黑色主题登录网页,永恒经典 18个黑白灰配色的网页设计作品
- 使用Mac自带的局域网远程控制其他Mac
- 解决 Navigating to current location (/userslist) is not allowed问题。
- 干货|TDD落地:从僵化、优化到固化的过程