让公式在网页传播——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. Visual Studio上编译ncnn

    prerequisite 是为了在PC上熟悉ncnn的基本代码,所以用Visual Studio来配置的. 期间用过VS2013(update5)/VS2015/VS2017,反正都是基于CMake生 ...

  2. Android自定义View+贝赛尔曲线

    Android -- 贝塞尔曲线公式的推导和简单使用https://www.cnblogs.com/wjtaigwh/p/6647114.html Android -- 贝塞尔使圆渐变为桃心http: ...

  3. JDK1.8 JVM参数配置

    JAVA_OPTS=" -server #服务器模式 -Xmx4g #JVM最大允许分配的堆内存,按需分配 -Xms4g #JVM初始分配的堆内存,一般和Xmx配置成一样以避免每次gc后JV ...

  4. 盘点那些Vs中常用到的Tab快捷编码

    1.快速声明for循环:for+Tab 2.快速声明Foreach遍历:foreach+Tab 3.快速定义属性:prop+Tab 4.

  5. 洛谷---小L和小K的NOIP考后放松赛

    链接: https://www.luogu.org/contestnew/show/11805?tdsourcetag=s_pcqq_aiomsg 题解: 没人过的题我就没看 t2: 考虑每个点是朋友 ...

  6. 2018软工实践作业八之UML设计

    1. 团队信息 队名:小白吃队 成员: 后敬甲 031602409 卢泽明 031602328 蔡文斌 031602301 葛亮 031602617 刘浩 031602423 黄泽 031602317 ...

  7. Evaluation map and reflexive space

    For a normed space \(X\), an isometric isomorphism can be defined from \(X\) to its second dual spac ...

  8. 如何扩展Orchard

    翻译自: http://msdn.microsoft.com/en-us/magazine/hh708754.aspx     动态类型系统 Content item是Orchard中的原子, 比如b ...

  9. MySQL 5.7 模式(SQL_MODE)详细说明 转

    5.7 默认模式: ONLY_FULL_GROUP_BY, STRICT_TRANS_TABLES, NO_ZERO_IN_DATE, NO_ZERO_DATE, ERROR_FOR_DIVISION ...

  10. Mongodb查询提示com.MongoDB.MongoException: too much data for sort() with no index

    解决办法: 查询数据量太大,添加索引即可解决问题 通过scrapy爬行完数据后,通过db.wooyun.drops.ensureIndex({"datetime":1})