让公式在网页传播——mathJAX
让公式在网页传播——mathJAX
对于学生党而言,写公式最好的工具是LaTeX,但LaTeX把公式展示到互联网上就有些困难,而使用截图又不太雅观。幸运的是,mathJAX引擎可以在浏览器中解析渲染数学符号公式,而不需要图片
导入
mathJAX本质是一段JavaScript脚本,可以本地引用,也可以使用cdn,这里采用引用国内的bootcss cdn的方式
<!--这里使用了bootcss的cdn来加速访问-->
<script src="https://cdn.bootcss.com/mathjax/2.7.2/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
配置
mathJAX引入后,可以根据我们的习惯稍微配置一下
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //关闭js加载过程信息
messageStyle: "none", //不显示信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ], //行内公式选择符
displayMath: [ ['$$','$$'], ["\\[","\\]"] ], //段内公式选择符
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], //避开某些标签
ignoreClass:"comment-content"|"head-class" //避开含该Class的标签,用|隔开
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"], //可选字体
showMathMenu: false //关闭右击菜单显示
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
公式在显示时会有边框,我们也可以自定义公式的CSS把它去掉
<style>
/*公式去掉外边框,自动换行*/
.MathJax_Display{overflow-x:auto;overflow-y:hidden;}
.MathJax{outline:0;}
</style>
输入公式
简单配置后,我们就可以输入公式了,语法与LaTeX一致。我们可以测试一下,完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Majax 测试</title>
<style>
/*公式去掉外边框,自动换行*/
.MathJax_Display{overflow-x:auto;overflow-y:hidden;}
.MathJax{outline:0;}
</style>
</head>
<body>
<h1>简单公式</h1>
$$
e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
\qquad (1)
$$
$$
x_1 = \frac{-b+\sqrt{b^2-4ac}} {2a}
\qquad (2)
$$
$$
x_1 = \frac{-b-\sqrt{b^2-4ac}} {2a}
\qquad (3)
$$
<h1>使用LaTeX语法对齐</h1>
\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
& = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\
& = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
& = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}
<h1>流程图</h1>
$\require{AMScd}$
\begin{CD}
A @>a>> B\\
@V b V V center @VV c V\\
C @>>d> D
\end{CD}
<!--这里使用了bootcss的cdn来加速访问-->
<script src="https://cdn.bootcss.com/mathjax/2.7.2/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
showProcessingMessages: false, //关闭js加载过程信息
messageStyle: "none", //不显示信息
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ], //行内公式选择符
displayMath: [ ['$$','$$'], ["\\[","\\]"] ], //段内公式选择符
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], //避开某些标签
ignoreClass:"comment-content" //避开含该Class的标签
},
"HTML-CSS": {
availableFonts: ["STIX","TeX"], //可选字体
showMathMenu: false //关闭右击菜单显示
}
});
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
</script>
</body>
</html>
运行结果
让公式在网页传播——mathJAX的更多相关文章
- 100天搞定机器学习|day37 无公式理解反向传播算法之精髓
100天搞定机器学习(Day1-34) 100天搞定机器学习|Day35 深度学习之神经网络的结构 100天搞定机器学习|Day36 深度学习之梯度下降算法 本篇为100天搞定机器学习之第37天,亦 ...
- CSDN Markdown简明教程3-表格和公式
0. 文件夹 文件夹 前言 表格 1 表格 2 表格对齐方式 公式 1 行内公式 2 陈列公式displayed formulas 3 MathJax语法 深入 声明 1. 前言 Markdown是一 ...
- 【343】MathJax、LaTex、Mathml 数学公式
参考:cnblog中添加数学公式支持 分类参考: 1. 基本功能 MathJax 我的LaTeX入门 MathJax basic tutorial and quick reference 分段函数:矩 ...
- MathJax.js是做什么的
MathJax.js是做什么的 一.总结 一句话总结: 用 MathJax 可以在浏览器页面很美观的显示数学公式 1.MathJax 语法? $$...$$之间是单行公式,$...$之间是行内公式 实 ...
- 【转载】markdown数学常用公式箭头符号
来源1:https://www.jianshu.com/p/3f01c5658356 来源2:https://blog.csdn.net/smstong/article/details/4434063 ...
- LaTex公式语法教程及手册(附emlogpro公式显示插件katex说明)
目录 第一列 第二列 第三列 效果 求和(使用\sum标签) 文本效果 本插件简介 积分(使用\int标签) 文本大小 LaTex是什么 空格 特殊符号 LaTex公式使用教程及手册 定界符 LaTe ...
- 在Hexo中渲染MathJax数学公式
最近学机器学习涉及很多的数学公式,公式如果用截图显示,会比较low而且不方便.因此需要对Hexo做些配置,支持公式渲染.同时文末整理了各种公式的书写心得,比如矩阵.大小括号.手动编号.上下角标和多行对 ...
- 100天搞定机器学习|day38 反向传播算法推导
往期回顾 100天搞定机器学习|(Day1-36) 100天搞定机器学习|Day37无公式理解反向传播算法之精髓 上集我们学习了反向传播算法的原理,今天我们深入讲解其中的微积分理论,展示在机器学习中, ...
- 公众号在线Markdown编辑器,支持公式
公众号排版不支持Markdown,用自带的富文本编辑器排版出来的格式十分丑陋,尤其是公式,竟然连"Mathjax"都不支持,但好在支持"带格式复制",也即可以将 ...
随机推荐
- angularjs 中通过 $location 进行路由跳转传参
$location.path('/page1').search({id: $scope.id,name:$scope.name}); 带参数跳转页面,在新的页面通过$routeParams接收参数 $ ...
- Python_xml
xml: 可扩展标记语言,用来标记数据,定义数据类型,主要用来传输和存储数据(和json差不多,不同语言或程序之间进行数据交换的协议) ET(xml.etree.ElementTree)中的几个类: ...
- 51Nod1306 高楼和棋子 动态规划
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1306.html 题目传送门 - 51Nod1306 题意 有个N层的高楼和若干个棋子,所有的棋子都是 ...
- JavaSE| 数组
1.数组(array) 数组就是多个相同类型数据的组合,实现对这些数据的统一管理. 数组中的元素可以是任何数据类型,包括基本数据类型和引用数据类型.数组属引用类型,数组型数据是对象(object),每 ...
- 012 pandas与matplotlib结合制图
这里以后再补充. 1.折线图
- 爬虫之 案列1补充(pipelines优化)
1. 先打开settings.py文件将 'ITEM_PIPELINES'启动(取消注释即可) 2. spider代码 # -*- coding: utf-8 -*- import scrapy im ...
- 爬虫2 urllib用法
from urllib import request,parse # 1. 解析数据 # 解析一条 # response = request.urlopen(url='http://httpbin.o ...
- 线程有gil锁
gil锁作用: 遇到阻塞( 比如 recv() , accept() )就切换
- 【LeetCode算法-14】Longest Common Prefix
Write a function to find the longest common prefix string amongst an array of strings. If there is n ...
- Cinema CodeForces - 670C (离散+排序)
Moscow is hosting a major international conference, which is attended by n scientists from different ...