Mathematic expressions in HTML with KaTeX

Dec 22, 2017 JavaScript LaTeX Math

KaTeX is a JavaScript library to render mathematic expressions in your web browser. Similar to MathJax it is able to use TeX as input.

Install KaTeX via npm

The following command installs katex via npm.

npm install --save katex
.
`-- katex@0.9.0-alpha2
  `-- match-at@0.1.1

Minimal KaTeX example

Here a minimal example of a mathematical expression with KaTeX. Mostly the same as with LaTeX, we just need to escape the backslashes.

<link href="path_to_css/katex.min.css" rel="stylesheet">
<script src="path_to_js/katex.min.js"></script>

<div id="katex-container"></div>
<script>
var katexContainer = document.getElementById('katex-container');
katex.render(
    "VAR(Q) = \\frac{1}{n}\\sum \\limits_{i=1}^{n} (q_i - \\mu)^2",
    katexContainer
);
</script>

Just replace path_to_css and path_to_js with the real path to the resources. The code from above results in the following output of the variance formular.