Mathematical Notation with KaTeX

This is a follow up on the previous article Mathematical Notation with MathJax. Be forewarned that the implementation of mathematical notation with KaTeX, which is a JavaScript display engine for mathematics, is still in its infancy. kramdown natively supports mathematical formulas of the TeX/LaTeX syntax in Markdown for display with MathJax, but not for KaTex. For these reasons you'll probably run into some compatibility issues and you need to fix the kramdown markup yourself. Nevertheless, it's the fastest math typesetting library for the web. It's performance is indeed impressive and issues are being worked on at a fast pace by a bunch of great open source developers.

Calculus

\[f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \,d\xi\]

f(x) = \int_{-\infty}^\infty
       \hat f(\xi)\,e^{2 \pi i \xi x}
       \,d\xi

Repeating fractions

\[\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} } } }\]

\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} } } }

Greek Letters

\[\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\ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi\]

\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\ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi

Lorenz Equations

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

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

Maxwell's Equations

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

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

Matrices

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

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

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 \(\left.\frac{x^3}{3}\right|_0^1\) 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 $$\left.\frac{x^3}{3}\right|_0^1$$ 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 |!

Kramdown Hack

Kramdown does not natively support KaTeX but you can transform the generated markup into KaTeX compatible blocks with JavaScript.

document.querySelectorAll("script[type='math/tex']").forEach(function(el) {
  el.outerHTML = katex.renderToString(el.textContent, { displayMode: false });
});

document.querySelectorAll("script[type='math/tex; mode=display']").forEach(function(el) {
  el.outerHTML = katex.renderToString(el.textContent.replace(/%.*/g, ''), { displayMode: true });
});