0

MathJax显示Latex、Mathml数学公式

 2 years ago
source link: https://hustlei.github.io/2015/06/mathjax-equation-display.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

mathjax简介

MathJax 是一个开源的基于 Ajax 的数学公式显示的解决方案。用mathjax可以正确显示html网页中直接插入的多种公式源码，包括:

  • LaTex公式
  • mathml公式
  • asciimat

mathjax支持主流的浏览器，显示效果非常漂亮。

mathjax主要特点：

  • 可以在html中高质量显示公式
  • 支持大多数浏览器，不需要安装插件、额外的字体等
  • 用户好用，开发者可以扩展
  • 支持数学可访问性，剪切、粘贴和其他高级功能
  • 强大的API，方便集成在其他网络应用上

mathjax显示latex公式

调用mathjax代码

// 设置$作为inline公式标记，默认$不是
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>

在html中插入latex公式方法

markdown中插入latex公式方式相同

  • 段落内公式
    • 置于\(和\)之间
    • 置于$和$之间

    相当于latex中的\begin{math}和\end{math}

  • 独立数学公式
    • 置于\[和\]之间
    • 置于$$和$$之间（latex好像不支持，markdown可以）

    相当于latex中的\begin{displaymath}和\end{displaymath}

示例

<p>The Lorenz Equations</p>
$$
\begin{array}{lll}
\dot{x} = \sigma(y-x) \\ 
\dot{y} = \rho x-y-xz \\
\dot{z} = -\beta z+xy
\end{array}
$$

<p>The probability of getting \(k\) heads when flipping \(n\) coins is: </p>

\[ P(E) = {n \choose k} p^k (1-p)^{n-k} \]

使用mathjax后显示效果如下：

The Lorenz Equations

˙x=σ(y−x)˙y=ρx−y−xz˙z=−βz+xyx˙=σ(y−x)y˙=ρx−y−xzz˙=−βz+xy

The probability of getting kk heads when flipping nn coins is:

[ P(E) = {n \choose k} p^k (1-p)^{n-k} ]

mathjax显示mathml公式

独立数学公式需要在math标签中设定属性dispalay="block"

<p>
inline equation
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo> <mi>b</mi><mi>x</mi>
  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
</p>
<p>
block equation
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>
  <mrow>
    <mfrac>
      <mrow>
        <mo>-</mo>
        <mi>b</mi>
        <mo>±</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>-</mo>
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow> <mn>2</mn><mi>a</mi> </mrow>
    </mfrac>
  </mrow>
  <mtext>.</mtext>
</math>
</p>

显示效果如下：

inline equation ax2+bx+c=0ax2+bx+c=0

block equation x=−b±√b2−4ac2a.x=-b±b2-4ac2a.

asciimath公式是比较简单的公式，例如ax2+bx+c=0ax2+bx+c=0，通用需要设置公式符号为反引号，默认不启用。本文不作介绍。

mathjax调用

有两种方法应用mathjax

  • 用cdn.mathjax.org上的mathjax分布式网络服务
  • 下载mathjax，链接到你的网页

mathjax CDN调用

CDN(content delivery network)内容分发网络

不需要下载mathjax到本地 CDN会自动从最近最快的服务器上下载mathjax CDN总是会调用最新的mathjax脚本

调用方法

  • 在head标签内加入如下代码（也可以放在body标签内，推荐放在head内）
<script type="text/javascript"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

TeX-AMS-MML_HTMLorMML是最常用的一个配置文件，可以选择其他的配置

常用配置有default,TeX-MML-AM_HTMLorMML,TeX-MML-AM_HTMLorMML-full

Tex指latex，AMS指asciimath，MMl指mathml

The-full version also loads the HTML-CSS, CommonHTML, and NativeMML output jax main code, plus the HTML-CSS mtable extension, which is normally loaded on demand.

本地调用mathjax

  1. 下载mathjax
  2. 引用mathjax
<script type="text/javascript" src="MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

mathjax高级设置及功能

插入inline latex公式方式设置

默认情况下只有\(...\)内的inline公式会被mathjax解析，因为$...$中的美元符号应用较广，这样可以避免冲突。如果要$...$内公式被mathjax解析为inline公式，设置方法如下：

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="path/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

插入独立latex公式方式设置

默认支持，不用显式设置

MathJax.Hub.Config({
  tex2jax: {displayMath: [ ['$$','$$'], ['\[','\]'] ]}
});

tex2jax引擎忽略的标签

MathJax.Hub.Config({
  tex2jax: {skipTags: ["script","noscript","style","textarea","pre","code"]}
});

公式编号及引用

自动编号公式

MathJax.Hub.Config({
    TeX: {equationNumbers: {autoNumber: "AMS"} }
});

autoNumber有两个可选值”AMS”,”all”

  • all：给所有公式编号
  • AMS：使用AMS样式编号

AMS样式编号使用方法：

\begin{equation}
   E = mc^2
\end{equation}

将会被自动编号

\begin{equation*}
   E = mc^2
\end{equation*}

\[E = mc^2\]

将不会被编号

在jekyll中有些不同

直接插入在\begin{equation}...\end{equation}之间会被编号，插入$...$,$$...$$,\[...\}之间的不会被编号。

插入\begin{equation*}...\end{equation*}会把*之间显示为斜体，无法正确显示公式，但是\begin{equation\*}...\end{equation\*}可以正确显示公式。

公式编号格式

MathJax.Hub.Config({
    TeX: {formatNumber: function (n) {return n}}
});

修改function(n)改变输出格式

公式引用

设置如下代码，才能够使用引用

MathJax.Hub.Config({
    tex2jax: {processRefs: true} 
});

使用\label可以给公式一个标签，然后就可以用\ref或\eqref引用公式，实例如下：

In equation \eqref{eq:sample}, we find the value of an
interesting integral:

\begin{equation}
  \int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}
  \label{eq:sample}
\end{equation}

显示效果如下：

In equation (1)(1), we find the value of an interesting integral:

∫∞0x3ex−1dx=π415(1)(1)∫0∞x3ex−1dx=π415

相关文档链接


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK