Mathematical Notation with MathJax

math syntax



The implementation of mathematical notation with MathJax, which is a JavaScript display engine for mathematics, works in all browsers. kramdown natively supports mathematical formulas of the TeX/LaTeX syntax in Markdown.

Examples

\[f(n) = \begin{cases} \frac{n}{2}, & \text{if $n$ is even} \\[2ex] 3n+1, & \text{if $n$ is odd} \end{cases}\]


$$f(n) =
\begin{cases}
\frac{n}{2},  & \text{if $n$ is even} \\[2ex]
3n+1, & \text{if $n$ is odd}
\end{cases}$$





\[\left\{ \begin{aligned} a_1x+b_1y+c_1z &=d_1+e_1 \\ a_2x+b_2y&=d_2 \\ a_3x+b_3y+c_3z &=d_3 \end{aligned} \right.\]


$$\left\{
\begin{aligned}
a_1x+b_1y+c_1z &=d_1+e_1 \\
a_2x+b_2y&=d_2 \\
a_3x+b_3y+c_3z &=d_3
\end{aligned}
\right.$$





\[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]


$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$





\[F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt\]


$$F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt$$





\[\int_0^1 f(t) \mathrm{d}t\]


\\[\int_0^1 f(t) \mathrm{d}t\\]





\[\sum_j \gamma_j^2/d_j\]


\\[\sum_j \gamma_j^2/d_j\\]





\[\begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix}\]


$$\begin{matrix}
1 & x & x^2 \\
1 & y & y^2 \\
1 & z & z^2 \\
\end{matrix}$$





\[\left[ \begin{array}{cc|c} 1&2&3\\ 4&5&6 \end{array} \right]\]


$$ \left[
    \begin{array}{cc|c}
      1&2&3\\
      4&5&6
    \end{array}
\right] $$





\[\begin{align*} & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right) = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\ & (x_1, \ldots, x_n) \left( \begin{array}{ccc} \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\ \vdots & \ddots & \vdots \\ \phi(e_n, e_1) & \cdots & \phi(e_n, e_n) \end{array} \right) \left( \begin{array}{c} y_1 \\ \vdots \\ y_n \end{array} \right) \end{align*}\]


$$\begin{align*}
  & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
  = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
  & (x_1, \ldots, x_n) \left( \begin{array}{ccc}
      \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
      \vdots & \ddots & \vdots \\
      \phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
    \end{array} \right)
  \left( \begin{array}{c}
      y_1 \\
      \vdots \\
      y_n
    \end{array} \right)
\end{align*}$$





\[\int_0^\infty \mathrm{e}^{-x}\,\mathrm{d}x\]


$$\int_0^\infty \mathrm{e}^{-x}\,\mathrm{d}x$$

Inline Statements

You can also make use of inline statements. The formula \(e^{\pi i} + 1 = 0\) is nicely produced within this text, as well as \(5 + 5 = 10\) and \(\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\).
Also \(x_1\) and \(\begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix}\) works well. Another example is \(\lim_{x \to \infty} \exp(-x) = 0\) or \(\frac{\frac{1}{x}+\frac{1}{y}}{y-z}\) or \(\cos (2\theta) = \cos^2 \theta - \sin^2 \theta\) or \(\left.\frac{x^3}{3}\right\vert_0^1\) or \(P\left(A=2\middle\vert\frac{A^2}{B}>4\right)\).

You can also make use of inline statements. The formula $$ e^{\pi i} + 1 = 0 $$ is nicely produced within this text, as well as $$ 5 + 5 = 10 $$ and  $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$.
Also $$x_1$$ and $$\begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix}$$ works well. Another example is $$\lim_{x \to \infty} \exp(-x) = 0$$ or $$\frac{\frac{1}{x}+\frac{1}{y}}{y-z}$$ or $$\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$$ or $$\left.\frac{x^3}{3}\right\vert_0^1$$ or $$P\left(A=2\middle\vert\frac{A^2}{B}>4\right)$$.

Note that LaTeX code that uses the pipe symbol | in inline math statements may lead to a line being recognized as a table line. This problem can be avoided by using the \vert command instead of |!

MathJax Implementation

<!-- MathJax config -->
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    //jax: ["input/TeX", "output/HTML-CSS"],
    //jax: ["input/TeX", "output/SVG"],
    jax: ["input/TeX", "output/CommonHTML"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "HTML-CSS": {
      availableFonts: ["Neo-Euler"],
      //webFont: "Gyre-Pagella"
    },
    CommonHTML: {
      availableFonts: ["Neo-Euler"],
      webFont: "Neo-Euler"
    },
    SVG: {
      scale: 75,
      font: "Neo-Euler"
    }
  });
</script>

<!-- MathJax Library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"></script>

MathJax documentation

Local Implementation

You need to put the entire mathjax folder structure to the path from where MathJax.js is being served. It can be obtained via npm install, git clone, bower install or direct download.

<script type="text/javascript" src="/js/vendor/mathjax/MathJax.js"></script>

Contents of mathjax:

162B Apr 25 10:30 .npmignore
 403B Apr 25 10:30 .travis.yml
  12K Apr 25 10:30 CONTRIBUTING.md
  11K Apr 25 10:30 LICENSE
  62K Apr 25 10:30 MathJax.js
 2.1K Apr 25 10:30 README.md
 222B Apr 25 10:30 bower.json
 483B Apr 25 10:30 composer.json
 1.2K Jun 25 22:00 config/
 170B Jun 25 22:00 docs/
 714B Jun 25 22:00 extensions/
 102B Jun 25 22:00 fonts/
 170B Jun 25 22:00 jax/
 3.1K Apr 25 10:30 latest.js
 1.5K Jun 25 22:00 localization/
 727B Apr 25 10:30 package.json
 748B Jun 25 22:00 test/
 272B Jun 25 22:00 unpacked/