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
(√ϕ√5−ϕ)e52π1=1+1+1+1+1+⋯e−8πe−6πe−4πe−2π 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=1∑nakbk)2≤(k=1∑nak2)(k=1∑nbk2) 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=1∑k+1i The LaTeX code:
\displaystyle\sum_{i=1}^{k+1}i
=(i=1∑ki)+(k+1) The LaTeX code:
\displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)
=2k(k+1)+k+1 The LaTeX code:
\displaystyle= \frac{k(k+1)}{2}+k+1
=2k(k+1)+2(k+1) The LaTeX code:
\displaystyle= \frac{k(k+1)+2(k+1)}{2}
=2(k+1)(k+2) The LaTeX code:
\displaystyle= \frac{(k+1)(k+2)}{2}
=2(k+1)((k+1)+1) The LaTeX code:
\displaystyle= \frac{(k+1)((k+1)+1)}{2}
Product notation
1+(1−q)q2+(1−q)(1−q2)q6+⋯ =j=0∏∞(1−q5j+2)(1−q5j+3)1, for ∣q∣<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−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
Γ Δ Θ Λ Ξ Π Σ Υ Φ Ψ Ω The LaTeX code:
\Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega
α β γ δ ϵ ζ η θ ι κ λ μ ν ξ o π ρ σ τ υ ϕ χ ψ ω ε ϑ ϖ ϱ ς φ
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
← → ← → ↑ ⇑ ↓ ⇓ ↕ ⇕ The LaTeX code:
\gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow
⇐ ⇒ ↔ ⇔ ↦ ↩ The LaTeX code:
\Leftarrow\ \Rightarrow\ \leftrightarrow\ \Leftrightarrow\
\mapsto\ \hookleftarrow
↼ ↽ ⇌ ⟵ ⟸ ⟶ The LaTeX code:
\leftharpoonup\ \leftharpoondown\ \rightleftharpoons\ \longleftarrow\ \Longleftarrow\ \longrightarrow
⟹ ⟷ ⟺ ⟼ ↪ ⇀ The LaTeX code:
\Longrightarrow\ \longleftrightarrow\ \Longleftrightarrow\ \longmapsto\
\hookrightarrow\ \rightharpoonup
⇁ ⇝ ↗ ↘ ↙ ↖ The LaTeX code:
\rightharpoondown\ \leadsto\ \nearrow\
\searrow\ \swarrow\ \nwarrow
Symbols
√ ⊼ ⊻ ⊙ ⊕ ⊗ ⊘ ⊚ ⊡ △ The LaTeX code:
\surd\ \barwedge\ \veebar\ \odot\ \oplus\ \otimes\ \oslash\ \circledcirc\ \boxdot\
\bigtriangleup
▽ † ⋄ ⋆ ◃ ▹ ∠ ∞ ′ △ The LaTeX code:
\bigtriangledown\ \dagger\ \diamond\ \star\ \triangleleft\
\triangleright\ \angle\ \infty\ \prime\ \triangle
Calculus
∫udxdvdx=uv−∫dxduvdx The LaTeX code:
\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
f(x)=∫−∞∞f^(ξ)e2πiξx The LaTeX code:
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}
∮F⃗⋅ds⃗=0 The LaTeX code:
\oint \vec{F} \cdot d\vec{s}=0
Lorenz Equations
x˙y˙z˙=σ(y−x)=ρx−y−xz=−βz+xy 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=∣∣∣∣∣∣∣∣∣i∂u∂X∂v∂Xj∂u∂Y∂v∂Yk00∣∣∣∣∣∣∣∣∣ 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=∣∣∣∣∣∣∣∣∣i∂u∂X∂v∂Xj∂u∂Y∂v∂Yk00∣∣∣∣∣∣∣∣∣ 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¨ 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
(y3x2) The LaTeX code:
\left(\frac{x^2}{y^3}\right)
Evaluation at limits
3x3∣∣∣∣01 The LaTeX code:
\left.\frac{x^3}{3}\right|_0^1
Case definitions
f(n)={2n,3n+1,if n is evenif n is odd 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⃗−c1∂t∂E⃗∇⋅E⃗∇×E⃗+c1∂t∂B⃗∇⋅B⃗=c4πj⃗=4πρ=0⃗=0 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:
k!(n−k)!n!=nCk The LaTeX code:
\frac{n!}{k!(n-k)!} = {^n}C_k
(kn) The LaTeX code:
{n \choose k}
Fractions on fractions
y−zx1+y1 The LaTeX code:
\frac{\frac{1}{x}+\frac{1}{y}}{y-z}
n-th root
n√1+x+x2+x3+… The LaTeX code:
\sqrt[n]{1+x+x^2+x^3+\ldots}
Matrices
⎝⎛a11a21a31a12a22a32a13a23a33⎠⎞ 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⎦⎤ The LaTeX code:
\begin{bmatrix} 0 & \cdots & 0 \\ \vdots & \ddots & \vdots \\ 0 & \cdots & 0 \end{bmatrix}
Punctuation
f(x)=√1+x(x≥−1) The LaTeX code:
f(x) = \sqrt{1+x} \quad (x \ge -1)
f(x)∼x2(x→∞) The LaTeX code:
f(x) \sim x^2 \quad (x\to\infty)
Now with punctuation:
f(x)=√1+x,x≥−1 The LaTeX code:
f(x) = \sqrt{1+x}, \quad x \ge -1
f(x)∼x2,x→∞ 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)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+b2
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