Home | Math Display Experiments | MathJax and KaTeX Comparison

KaTeX and MathJax Comparison Demo

Page by Murray Bourne, IntMath.com. Last updated: 10 May 2016

Process with KaTex Process with MathJax

Time to process page = 259 ms

Page processed with KaTex

Note

One or two of the examples don't work (yet) when processed by KaTeX. In such cases, you will see red error messages in place of the math, indicating the problem.

Choose "Process with MathJax" (above) to see what the math should look like, and to compare processing times.

See also: ASCIIMathML, KaTeX and MathJax Demo

Repeating fractions

1(ϕ5−ϕ)e25π=1+e−2π1+e−4π1+e−6π1+e−8π1+⋯\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

The LaTeX code:

\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

Summation notation

(∑k=1nakbk)2≤(∑k=1nak2)(∑k=1nbk2)\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

The LaTeX code:

 
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)

Sum of a Series

I broke up the next two examples into separate lines so it behaves better on a mobile phone. That's why they include \displaystyle.

∑i=1k+1i\displaystyle \displaystyle\sum_{i=1}^{k+1}i

The LaTeX code:

\displaystyle\sum_{i=1}^{k+1}i
=(∑i=1ki)+(k+1)\displaystyle\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)

The LaTeX code:

\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
=k(k+1)2+k+1\displaystyle \displaystyle= \frac{k(k+1)}{2}+k+1

The LaTeX code:

\displaystyle= \frac{k(k+1)}{2}+k+1
=k(k+1)+2(k+1)2\displaystyle \displaystyle= \frac{k(k+1)+2(k+1)}{2}

The LaTeX code:

\displaystyle= \frac{k(k+1)+2(k+1)}{2}
=(k+1)(k+2)2\displaystyle \displaystyle= \frac{(k+1)(k+2)}{2}

The LaTeX code:

\displaystyle= \frac{(k+1)(k+2)}{2}
=(k+1)((k+1)+1)2\displaystyle \displaystyle= \frac{(k+1)((k+1)+1)}{2}

The LaTeX code:

\displaystyle= \frac{(k+1)((k+1)+1)}{2}

Product notation

1+q2(1−q)+q6(1−q)(1−q2)+⋯\displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =∏j=0∞1(1−q5j+2)(1−q5j+3),= \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},  for ∣q∣<1. \displaystyle\text{ for }\lvert q\rvert < 1.

The LaTeX code:

 \displaystyle\text{ for }\lvert q\rvert < 1.

The LaTeX code:

= \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},

The LaTeX code:

\displaystyle
1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots

Inline math

And here is some in-line math: kn+1=n2+kn2−kn−1k_{n+1} = n^2 + k_n^2 - k_{n-1}, followed by some more text.

The LaTeX code:

k_{n+1} = n^2 + k_n^2 - k_{n-1}

Inline math uses

<span class="math">...</span>

rather than a div.

Greek Letters

Γ Δ Θ Λ Ξ Π Σ Υ Φ Ψ Ω\displaystyle\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega

The LaTeX code:

\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega

α β γ δ ϵ ζ η θ ι κ λ μ ν ξ\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi  o π ρ σ τ υ ϕ χ ψ ω ε ϑ ϖ ϱ ς φ\ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi

The LaTeX code:

\ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi

The LaTeX code:

\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi

Arrows

← → ← → ↑ ⇑ ↓ ⇓ ↕ ⇕\displaystyle\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow

The LaTeX code:

\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
⇐ ⇒ ↔ ⇔ ↦ ↩\displaystyle \Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow\ \mapsto\ \hookleftarrow

The LaTeX code:

\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow\ 
\mapsto\ \hookleftarrow
↼ ↽ ⇌ ⟵ ⟸ ⟶\displaystyle \leftharpoonup\ \leftharpoondown\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow

The LaTeX code:

\leftharpoonup\ \leftharpoondown\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow
⟹ ⟷ ⟺ ⟼ ↪ ⇀\displaystyle \Longrightarrow\ \longleftrightarrow\ \Longleftrightarrow\ \longmapsto\ \hookrightarrow\ \rightharpoonup

The LaTeX code:

\Longrightarrow\ \longleftrightarrow\ \Longleftrightarrow\ \longmapsto\ 
\hookrightarrow\ \rightharpoonup
⇁ ⇝ ↗ ↘ ↙ ↖\displaystyle \rightharpoondown\ \leadsto\ \nearrow\ \searrow\ \swarrow\ \nwarrow

The LaTeX code:

\rightharpoondown\ \leadsto\ \nearrow\ 
\searrow\ \swarrow\ \nwarrow

Symbols

√ ⊼ ⊻ ⊙ ⊕ ⊗ ⊘ ⊚ ⊡ △\displaystyle \surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ \bigtriangleup

The LaTeX code:

 
\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\ 
\bigtriangleup
▽ † ⋄ ⋆ ◃ ▹ ∠ ∞ ′ △\displaystyle \bigtriangledown\ \dagger\ \diamond\ \star\ \triangleleft\ \triangleright\ \angle\ \infty\ \prime\ \triangle

The LaTeX code:

 
\bigtriangledown\ \dagger\ \diamond\ \star\ \triangleleft\ 
\triangleright\ \angle\ \infty\ \prime\ \triangle

Calculus

∫udvdxdx=uv−∫dudxvdx\displaystyle \int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx

The LaTeX code:

 
\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
f(x)=∫−∞∞f^(ξ)e2πiξx\displaystyle f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}

The LaTeX code:

 
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}
∮F⃗⋅ds⃗=0\displaystyle \oint \vec{F} \cdot d\vec{s}=0

The LaTeX code:

 
\oint \vec{F} \cdot d\vec{s}=0

Lorenz Equations

x˙=σ(y−x)y˙=ρx−y−xzz˙=−βz+xy\displaystyle \begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}

The LaTeX code:

\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned}

Cross Product

This works in KaTeX, but the separation of fractions in this environment is not so good.

V1×V2=∣ijk∂X∂u∂Y∂u0∂X∂v∂Y∂v0∣\displaystyle \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}

The LaTeX code:

\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}

Here's a workaround: make the fractions smaller with an extra class that targets the spans with "mfrac" class (makes no difference in the MathJax case):

V1×V2=∣ijk∂X∂u∂Y∂u0∂X∂v∂Y∂v0∣\displaystyle \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}

The LaTeX code:

\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}

Accents

x^ x⃗ x¨\displaystyle \hat{x}\ \vec{x}\ \ddot{x}

The LaTeX code:

 
\hat{x}\ \vec{x}\ \ddot{x}

However, these didn't work in KaTeX:

ParseError: KaTeX parse error: Expected 'EOF', got '\overrightarrow' at position 29: \overrightarrow̲{AB}

The LaTeX code:

\overrightarrow{AB}
ParseError: KaTeX parse error: Expected 'EOF', got '\underset' at position 24: tyle A\underset̲{0^{\circ}C }{

The LaTeX code:

A\underset{0^{\circ}C }{\overset{100^{\circ}C}{\rightleftarrows}}B

Stretchy brackets

(x2y3)\displaystyle \left(\frac{x^2}{y^3}\right)

The LaTeX code:

 
\left(\frac{x^2}{y^3}\right)

Evaluation at limits

x33∣01\displaystyle \left.\frac{x^3}{3}\right|_0^1

The LaTeX code:

 
\left.\frac{x^3}{3}\right|_0^1

Case definitions

f(n)={n2,if n is even3n+1,if n is odd\displaystyle f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\ 3n+1, & \text{if } n\text{ is odd} \end{cases}

The LaTeX code:

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

Maxwell's Equations

∇×B⃗−1c∂E⃗∂t=4πcj⃗∇⋅E⃗=4πρ∇×E⃗+1c∂B⃗∂t=0⃗∇⋅B⃗=0\displaystyle \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

The LaTeX code:

 
\begin{aligned}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\   \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}

Statistics

Definition of combination:

n!k!(n−k)!=nCk\displaystyle \frac{n!}{k!(n-k)!} = {^n}C_k

The LaTeX code:

 
\frac{n!}{k!(n-k)!} = {^n}C_k
(nk)\displaystyle {n \choose k}

The LaTeX code:

{n \choose k}

Fractions on fractions

1x+1yy−z\displaystyle \frac{\frac{1}{x}+\frac{1}{y}}{y-z}

The LaTeX code:

 
\frac{\frac{1}{x}+\frac{1}{y}}{y-z}

n-th root

1+x+x2+x3+…n\displaystyle\sqrt[n]{1+x+x^2+x^3+\ldots}

The LaTeX code:

\sqrt[n]{1+x+x^2+x^3+\ldots}

Matrices

(a11a12a13a21a22a23a31a32a33)\displaystyle \begin{pmatrix} a_{11} & a_{12} & a_{13}\\ a_{21} & a_{22} & a_{23}\\ a_{31} & a_{32} & a_{33} \end{pmatrix}

The LaTeX code:

\begin{pmatrix}
a_{11} & a_{12} & a_{13}\\ 
a_{21} & a_{22} & a_{23}\\ 
a_{31} & a_{32} & a_{33}
\end{pmatrix}
[0⋯0⋮⋱⋮0⋯0]\displaystyle \begin{bmatrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}

The LaTeX code:

\begin{bmatrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}

Punctuation

f(x)=1+x(x≥−1)\displaystyle f(x) = \sqrt{1+x} \quad (x \ge -1)

The LaTeX code:

f(x) = \sqrt{1+x} \quad (x \ge  -1)
f(x)∼x2(x→∞)\displaystyle f(x) \sim x^2 \quad (x\to\infty)

The LaTeX code:

f(x) \sim x^2 \quad (x\to\infty)

Now with punctuation:

f(x)=1+x,x≥−1\displaystyle f(x) = \sqrt{1+x}, \quad x \ge -1

The LaTeX code:

f(x) = \sqrt{1+x}, \quad x \ge -1
f(x)∼x2,x→∞\displaystyle f(x) \sim x^2, \quad x\to\infty

The LaTeX code:

f(x) \sim x^2, \quad x\to\infty

Only one instance of math?

Say you only have a limited number of math items on a page. You can use KaTeX by simply calling

katex.render

with a TeX expression and a DOM element to render into, as follows:

f(a,b,c)=(a2+b2+c2)3f(a,b,c) = (a^2+b^2+c^2)^3

This example is independent of the loop that KaTeX goes through for other math on this page.

Generating HTML on the server

To generate HTML on the server, you can use "katex.renderToString", as follows:

c=±a2+b2c = \pm\sqrt{a^2 + b^2}

Try again?

Process with KaTex Process with MathJax

Background and explanation

Read more about KaTeX and the examples above here:

KaTeX – a new way to display math on the Web

See also: ASCIIMathML, KaTeX and MathJax Demo