让公式在网页传播——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. python requests 正则爬虫

    代码: import requests from multiprocessing import Pool from requests.exceptions import RequestExceptio ...

  2. 微信JSAPI分享朋友圈调试经验：invalid signature签名错误排查

    .invalid signature签名错误.建议按如下顺序检查: 1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapi ...

  3. OpenJDK-study-002 从GitHub下载openjdk，以及Cygwin的安装

    承前启后 由于上一篇openjdk-study-001中,从Mercurial直接拉取openjdk森林失败,于是网上搜了一下,发现GitHub上有人分享openjdk的源码 https://gith ...

  4. C#连接Oracle错误：OCIEnvCreate 失败，返回代码为 -1

    处理某些数据需要从Oracle里读取数据 因为数据不多,简单方便直接用 System.Data.OracleClient 添加引用,写sql语句一气呵成,运行立刻报错 从没见过这错误啊… 上网搜索之… ...

  5. The connection string 'MysqlEF' in the application's configuration file does not contain the require异常

    在学习EF core first 对接mysql时,出现了这个异常. 原因是:连接字符串中缺少providerName="MySql.Data.MySqlClient" <a ...

  6. 【Android】 textview 中超出屏幕宽度的字符 省略号显示

    当利用textview显示内容时,显示内容过多可能会折行或显示不全,那样效果很不好. 实现如下: <TextView android:layout_width="fill_parent ...

  7. Python_shelve模块

    shelve:对象持久化的保存的模块,将对象保存到文件里  (默认的数据存储文件为二进制),可持久化任何pickle可支持的Python数据格式 shelve 中唯一的方法: shelve.open( ...

  8. JDK自带工具keytool生成ssl证书

    前言: 因为公司项目客户要求使用HTTPS的方式来保证数据的安全,所以木有办法研究了下怎么生成ssl证书来使用https以保证数据安全. 百度了不少资料,看到JAVA的JDK自带生成SSL证书的工具: ...

  9. Web界面实现数据库增删改查过程

    实现方法:JSP+Servlet+JavaBean 基本实现思想:jsp文件为显示界面,包括增删改查四个界面,然后使用form或者href超链接的方法将网页获得的值传到Servlet中的方法里:而se ...

  10. hdu 1043 Eight (八数码问题)【BFS】+【康拓展开】

    <题目链接> 题目大意:给出一个3×3的矩阵(包含1-8数字和一个字母x),经过一些移动格子上的数后得到连续的1-8,最后一格是x,要求最小移动步数. 解题分析:本题用BFS来寻找路径,为 ...