让公式在网页传播——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. 解开一个疑惑，为什么LVS开放的端口，使用netstat或ss命令，不能查找到其监听的端口呢？

    RT, 这个疑问,本周一直在心里,今天找到一个说法. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 另外LVS规则算是内核方法,用netstat -ntulp也显 ...

  2. Spring MVC基础知识整理➣拦截器和自定义注解

    概述 Spring MVC中通过注解来对方法或者类进行动态的说明或者标注,类似于配置标识文件的属性信息.当标注的类或者方式被使用时候,通过提取注解信息来达到对类的动态处理.在 MVC中,我们常用的注解 ...

  3. cf666 C. Codeword 组合数学

    题解: 首先暴力很显然 f[i][j]表示到第i个位置,串匹配到j 这样每次是n^2的 我们假设每个位置匹配的第一个位置 然后从这个到上一个位置一定不能等于这个串的值 ans=simga{i,C(i- ...

  4. HDU1693 Eat the Trees 插头dp

    原文链接http://www.cnblogs.com/zhouzhendong/p/8433484.html 题目传送门 - HDU1693 题意概括 多回路经过所有格子的方案数. 做法 最基础的插头 ...

  5. POJ1469 COURSES 二分图匹配 匈牙利算法

    原文链接http://www.cnblogs.com/zhouzhendong/p/8232649.html 题目传送门 - POJ1469 题意概括 在一个大矩阵中,有一些障碍点. 现在让你用1*2 ...

  6. JDK5的新特性之可变参数&Arrays.asList()方法

    [代码] package com.hxl; import java.util.Arrays; import java.util.List; public class Test { public sta ...

  7. 006 numpy常用函数

    属于Numpy的函数. 一:通用函数 1.说明 是一种对ndarray中的数据执行元素级运算的函数. 2.一元函数 3.二元函数 二:矢量计算 1.numpy.where 主要有两种用法 np.whe ...

  8. 如何将.SQL文件的数据导入到Mysql的数据库中

    一.用cmd的调试环境导入.sql文件中的数据: WinR键打开cmd输入: MySQL -u root -p 进入MySQL后MySQL>use DR;   MySQL> source  ...

  9. css上传图片中等待不可点击效果

    <!DOCTYPE html> <html> <head> <title>上传中</title> <style type=" ...

  10. HDU 2389 Rain on your Parade 最大匹配(模板题)【HK算法】

    <题目链接> 题目大意:有m个宾客,n把雨伞,预计时间t后将会下大雨,告诉你每个宾客的位置和速度,每把雨伞的位置,问你最多几个宾客能够拿到伞. 解题分析: 本题就是要我们求人与伞之间的最大 ...