python mathjax_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}$$
2. 使用MathJax
2.1 引入CDN
在使用MathJax之前,需要通过CDN引入, 在
标签中添加:
`
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) { // 如果:没有配置MathJax
initMathjaxConfig();
}
// 如果,不传入第三个参数,则渲染整个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. 更多资料
python mathjax_MathJax: 让前端支持数学公式相关推荐
- MathJax: 让前端支持数学公式
文章图片存储在GitHub,网速不佳的朋友,请看<MathJax:让前端支持数学公式> 或者 来我的技术小站 godbmw.com 1. 必须要说 1.1 开发背景 博主使用Vue开发的个 ...
- Edit Distance Python源码及支持包的实现
Edit Distance Python源码及支持包的实现 编辑距离 编辑距离 又称Levenshtein距离(莱文斯坦距离也叫做Edit Distance)指两个字串之间,由一个转成另一个所需的最少 ...
- python多线程编程(1): python对多线程的支持
From: http://www.cnblogs.com/holbrook/archive/2012/03/01/2376408.html 前面介绍过多线程的基本概念,理解了这些基本概念,掌握pyth ...
- python多线程编程_python多线程编程(1): python对多线程的支持
前面介绍过多线程的基本概念,理解了这些基本概念,掌握python多线程编程就比较容易了. 在开始之前,首先要了解一下python对多线程的支持. 虚拟机层面 Python虚拟机使用GIL(Global ...
- Python: subprocess.Popen()不支持unicode问题解决
Python: subprocess.Popen()不支持unicode问题解决 参考文章: (1)Python: subprocess.Popen()不支持unicode问题解决 (2)https: ...
- 支付宝解释 2019 年账单总额较高;腾讯 QQ 回应新功能可显示对方实时电量;Python 2.7 结束支持 | 极客头条...
整理 | 屠敏 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注 ...
- Python 2 即将停止支持!
之前我们曾报道过 Python 2.7 将于 2020 年退休的消息,随着该时间节点的临近,已陆续有一大批 Python 项目宣布将在 2020 年之前放弃对 Python 2.7 的支持,包括 pa ...
- 多线程编程(1): python对多线程的支持
python多线程编程(1): python对多线程的支持 前面介绍过多线程的基本概念,理解了这些基本概念,掌握python多线程编程就比较容易了. 在开始之前,首先要了解一下python对多线程的支 ...
- Python 和 Web 前端选择哪个比较合适?哪个前景好?
Python 和 web 前端想必大家都很熟悉,不过很多转行的朋友都会问:学习 Python 还是 web 前端呢?Python 和 Web 前端哪个就业前景好?接下来为大家介绍一下. 其实 Pyth ...
最新文章
- hdu 1081To The Max
- linux 安装 memcached
- HDU - 1754 I Hate It(Splay-区间最大值)
- 移动端HTML响应式布局之神奇的pt(自测99.99%与设计图一致)
- 港大南科大提出端到端PDVC,用DETR的方法做Dense Video Captioning!简化训练流程
- Windows Phone7 手机越狱教程
- dubbo常见的一些面试题
- 微信小程序app配置指南
- HTML+CSS实现淘宝首页
- C语言 职工信息管理系统
- 51Talk-Level 7 Unit 1 L1
- win10系统文件拖拽卡顿_win10电脑中鼠标拖动窗口有延迟如何解决
- 大数据风控是在做什么?
- 安卓键盘加上数字_安卓键盘键值对照表
- IPC机制(一)---基础知识
- android添加3个虚拟按键音
- 计算机二级宝典几个人用,计算机二级宝典
- 北京开元数图科技有限公司面试总结(1)
- Iterative Deep Graph Learning for Graph Neural Networks: Better and Robust Node Embeddings
- [置顶]百度、谷歌、雅虎三大搜索引擎算法区别