让公式在网页传播——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---手动实现两个有序列表的合并

    可能又和标准的实现不一样, 但是自己的实现, 印象就会不一样的. # coding = utf-8 # 两个有序列表的合并,将two_list合并到one_list def merge_order_l ...

  2. Spark的Streaming + Flume进行数据采集（flume主动推送或者Spark Stream主动拉取）

    1.针对国外的开源技术,还是学会看国外的英文说明来的直接,迅速,这里简单贴一下如何看: 2.进入到flume的conf目录,创建一个flume-spark-push.sh的文件: [hadoop@sl ...

  3. kickstart-G

    感觉自己很蠢,large数据只能交一次,忘记这回事了 A题 O(n^2)解法,用vector<set> 缓存j后面的数据,减少一重循环 #include <string> #i ...

  4. mysql 5.6.25编译安装详细步骤

    简略步骤: mysql5.6.25编译安装步骤: 下载mysql准备用户和组yum安装依赖解压mysqlcmake编译mysqlmake && make install ----时间约 ...

  5. C语言之指针变量

    菜单导航 1.指针变量 2.指针和数组 3.常量指针和指向常量的指针 4.指针和字符串的关系 5.数组越界造成的访问不属于自己的内存空间现象 6.引用数据类型和基本数据类型,形参和实参 7.字符串和字 ...

  6. python全栈开发day81--jsonp

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PHP中使用CURL实现GET和POST请求（转载）

    CURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 CURL 库.使用PHP的CURL 库可以简单和有效地去抓网页.你只 ...

  8. Codeforces Round #487 (Div. 2) 跌分有感

    又掉分了 这次的笑话多了. 首先,由于CF昨天的比赛太早了,忘记了有个ER,比赛开始半个小时才发现. 于是只能今天了. 嗯哈. 今天这场也算挺早的. 嗯嗯,首先打开A题. 草草看了一遍题意,以为不是自 ...

  9. 环境变量误删path找回方法与mysql基础命令

    环境变量误删path找回方法用户path:%USERPROFILE%\AppData\Local\Microsoft\WindowsAppsWin+R 输入regedit 打开注册表(开始-运行里输入 ...

  10. POJ 3061 Subsequence【二分答案】||【尺取法】

    <题目链接> 题目大意: 给你一段长度为n的整数序列,并且给出一个整数S,问你这段序列中区间之和大于等于S的最短区间长度是多少. 解题分析:本题可以用二分答案做,先求出前缀和,然后枚举区间 ...