让公式在网页传播——mathJAX

对于学生党而言，写公式最好的工具是LaTeX，但LaTeX把公式展示到互联网上就有些困难，而使用截图又不太雅观。幸运的是，mathJAX引擎可以在浏览器中解析渲染数学符号公式，而不需要图片

导入

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的更多相关文章

  1. 100天搞定机器学习|day37 无公式理解反向传播算法之精髓

     100天搞定机器学习(Day1-34) 100天搞定机器学习|Day35 深度学习之神经网络的结构 100天搞定机器学习|Day36 深度学习之梯度下降算法 本篇为100天搞定机器学习之第37天,亦 ...

  2. CSDN Markdown简明教程3-表格和公式

    0. 文件夹 文件夹 前言 表格 1 表格 2 表格对齐方式 公式 1 行内公式 2 陈列公式displayed formulas 3 MathJax语法 深入 声明 1. 前言 Markdown是一 ...

  3. 【343】MathJax、LaTex、Mathml 数学公式

    参考:cnblog中添加数学公式支持 分类参考: 1. 基本功能 MathJax 我的LaTeX入门 MathJax basic tutorial and quick reference 分段函数:矩 ...

  4. MathJax.js是做什么的

    MathJax.js是做什么的 一.总结 一句话总结: 用 MathJax 可以在浏览器页面很美观的显示数学公式 1.MathJax 语法? $$...$$之间是单行公式,$...$之间是行内公式 实 ...

  5. 【转载】markdown数学常用公式箭头符号

    来源1:https://www.jianshu.com/p/3f01c5658356 来源2:https://blog.csdn.net/smstong/article/details/4434063 ...

  6. LaTex公式语法教程及手册（附emlogpro公式显示插件katex说明）

    目录 第一列 第二列 第三列 效果 求和(使用\sum标签) 文本效果 本插件简介 积分(使用\int标签) 文本大小 LaTex是什么 空格 特殊符号 LaTex公式使用教程及手册 定界符 LaTe ...

  7. 在Hexo中渲染MathJax数学公式

    最近学机器学习涉及很多的数学公式,公式如果用截图显示,会比较low而且不方便.因此需要对Hexo做些配置,支持公式渲染.同时文末整理了各种公式的书写心得,比如矩阵.大小括号.手动编号.上下角标和多行对 ...

  8. 100天搞定机器学习|day38 反向传播算法推导

    往期回顾 100天搞定机器学习|(Day1-36) 100天搞定机器学习|Day37无公式理解反向传播算法之精髓 上集我们学习了反向传播算法的原理,今天我们深入讲解其中的微积分理论,展示在机器学习中, ...

  9. 公众号在线Markdown编辑器，支持公式

    公众号排版不支持Markdown,用自带的富文本编辑器排版出来的格式十分丑陋,尤其是公式,竟然连"Mathjax"都不支持,但好在支持"带格式复制",也即可以将 ...

随机推荐

  1. 关于The specified Android SDK Build Tools version (26.0.2) is ignored, as it is below the minimum...

    今天将项目迁移到另一台笔记本,进行build出现以下问题,导致build失败 The specified Android SDK Build Tools version (26.0.2) is ign ...

  2. Win10 配置Tomcat与Java环境变量

    一:下载JKD与Tomcat包 JDK        密码:d9ym Tomcat   密码:z9pa 二:安装JAVA-JDK与配置环境变量 ①:记住安装的地址 ②:配置JAVA-JDK的环境变量, ...

  3. 山寨版 WP8.1 Cortana 启动 PC

    8.1 dev preview 发布以来 Cortana 很受关注 前一段看到有视频演示用 Cortana 来启动 PC 看视频也是启动第三方应用实现的,简单来弄其实就是个语音启动应用 + 网络唤醒么 ...

  4. js 2017 - 2

    设置360为极速模式   <meta name='renderer' content='webkit'> css3超出隐藏 .ellipsis { // 超出一行 width: 100%; ...

  5. java流程控制语句总结

    1.选择结构 if 方式1: 格式: if(条件表达式) { 语句体; } 执行流程: 如果条件表达式值为true, 执行语句体 如果条件表达式值为false,不执行语句体 方式2: 格式: if(条 ...

  6. [转]Ubuntu默认使用root用户登录并免去输入密码

    启用Root用户登录 Ctrl + Alt + T进入终端, 输入cd /usr/share/lightm/ightm.conf.d, 如果提示你没有那个文件或目录.那就一次次的进入目录. 进入之后会 ...

  7. ORM框架之------Dapper，Net下无敌的ORM

    一,介绍:Dapper是一款轻量级ORM工具.如果你在小的项目中,使用Entity Framework.NHibernate 来处理大数据访问及关系映射,未免有点杀鸡用牛刀.你又觉得ORM省时省力,这 ...

  8. Python_os模块

    os模块:可以处理文件和目录,是Python系统和操作系统进行交互的一个接口 os模块常用方法: os.getcwd(): 获取当前工作目录,(即当前Python脚本工作的目录路径) os.chdir ...

  9. Nginx编译安装：

    第三方模块 在nginx.org   --------  wiki  找 --add-module=   添加 Nginx编译安装: 安装开发环境 ]# yum groupinstall " ...

  10. HTML自定义滚动条（仿网易邮箱滚动条）转载

    它是使用CSS中的伪元素来实现的,主要由以下三个来完成: 1. -webkit-scrollbar:定义滚动条的样式,如长宽. 2. -webkit-scrollbar-thumb:定义滚动条上滑块的 ...