Simple guide to using $\KaTeX$

PDF version
LaTeX file
smrender.js file
KaTeX Live Demo Requirements
Implementation
Autorendering
Examples
Errors
Copy and Paste
$\KaTeX$Commands
Minimal page
smrender.js
References

Requirements

This shows how to use $\KaTeX$ using pure JavaScript without installing extra programs, so will work on any machine.
  1. katex files in GitHub KaTeX Downloads, katex.zip or katex.tar.gz
    You only need katex.min.css, katex.min.js and the fonts folder (see Font).
    Alternatively you can include the files from jsDelivr CDN (see README.md).
  2. smrender.js

Firefox Fonts
Firefox possibly might not allow the fonts folder to be in a separate directory.
Either
put a copy of katex.min.css and the fonts folder in the same directory as the HTML document
Note that, from Firefox 68, this won't work if the file is a local one so URI is file:///, See Reason: CORS request not HTTP.
In this case use katex.min.css from the CDN README.md.
or
use one of the solutions at Cross Domain Fonts

Implementation

(Taken from [2]) If you have only a few equations on your page, you can proceed as follows: 
<span id="mykatex1">...</span>
<script>
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex1);
</script>
which gives

...

This will place the equation into your Web page, as properly rendered maths. A second equation would need a new id on the span, and in the script, like this: 
<span id="mykatex2">...</span>
<script>
katex.render("f(a,b,c) = (a^2+b^2+c^2)^3", mykatex2);
</script>

...

Autorendering

If you have lots of equations on the page you need auto-rendering which renders the equations inside prescribed delimiters (Katex does have an autorendering plugin in the contrib subfolder you may wish to use). The work is done by smrender.js (see below) following an idea from [2] and there are two rendering modes:

Displayed formula

The following alternatives have the same effect 
<div class="maths">...<div>
%[...%] (auto changed to div)

Inline formula

These have the same effect 
<span class="maths">...<span>
%% ... %% (auto changed to span - use \%% for actual dollar sign in text or \\%% in maths)
%( ...%) (auto changed to span)
<p class="maths">...<<p>

Examples

Displayed formula

Aligned at equals sign \[ \begin{aligned} \int_0^1\frac{x^4(1-x)^4}{1+x^2}\,dx &=\frac{22}{7}-\pi\\ \\ \int_{-\infty}^\infty e^{-x^2}\,dx &=\sqrt{\pi} \end{aligned} \]

Inline formula

$\int_{-\infty}^\infty e^{-x^2}\,dx =\sqrt{\pi}$ is a well-known result.

Formulae can be on more than one line
%%\sum_{i=1}^\infty\frac{1}{n^2}
=\frac{\pi^2}{6}%%
gives $\sum_{i=1}^\infty\frac{1}{n^2}=\frac{\pi^2}{6}$

Errors

$\KaTeX$ errors are shown in red. For example, wrong spelling of \infty: 
%[
\int_{-\infinity}^\infinity e^{-x^2}\,dx &=\sqrt{\pi}
%]
\[\int_{-\infinity}^\infinity e^{-x^2}\,dx =\sqrt{\pi}\]
Errors should not stop rendering of further correct formulae: $|x|=\begin{cases} \phantom{-}x,&x\ge0,\\ -x,&x<0. \end{cases}$

Note
Using less than signs before a letter such as a<b will cause strange $\KaTeX$ errors. This is because HTML misreads a<b so passes a malformed string to $\KaTeX$.
The solution is to use spaces: a< b< c or a < b < c to get $a< b< c$. Alternatively, $\KaTeX$ recognises \lt and a\lt b gives $a\lt b$.

Copy and Paste

Loading the optional copy-tex files allows the reader to copy the formula and paste into a text editor to recover the LaTeX syntax. This is done by adding 
	<script src="copy-tex.min.js">
	<link rel="stylesheet" href="copy-tex.min.css">
to the head element and works in most browsers, though not Edge or Internet Explorer. You can try it with the formulæ on this page. See Copy-tex extension for full details.

$\KaTeX$ Commands

These are listed in KaTeX's Wiki at Supported Functions.

Sample KaTeX Document and its source code show how to implement automatic equation numbering, referencing and bibliography numbering.

Minimal autorender page

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Minimal example</title>
	<link rel="stylesheet" href="katex.min.css">
	<script src="katex.min.js"></script>
	<script src="smrender.js"></script>

<style>
/* optional - uncomment and customise next line to change maths font size
	.katex { font-size: 1em !important; } 
*/ 
</style>
</head>

<body onload="myRender()">
This is inline %%\left\{\frac{1}{n^2}\right\}%% 
but this is displayed %[\int_0^1\frac{x^4(1-x)^4}{1+x^2}\,dx =\frac{22}{7}-\pi%]
centred on its own line.
</body>
</html>

smrender.js

Use <script src="pathto/smrender.js"></script>
smrender.js goes through the html file automatically rendering all the formulae.
Here are the contents with comments: 
function myRender()
{
	  // replace text dollar signs by %​% temporarily then
	  // replace %%...%% by <span class="maths">...</span>
	  // regular expression \%%([\s\S]+?)\%%/g consists of all whitespace \s 
	  // and non-whitespace characters \S between the dollar signs. See [4]
	document.body.innerHTML = document.body.innerHTML.replace(/\\\\$/g, '\%\%');
	document.body.innerHTML = document.body.innerHTML.replace(/\%%([\s\S]+?)\%%/g, '<span class=\"maths\">%%1</span>');
	  // replace %[ ...%] by <div class="maths"> ... </div>
	  // but don't replace eg \\[1ex] so temporarily rename them
	document.body.innerHTML = document.body.innerHTML.replace(/\\\\\[/g, '%​%​%');
	document.body.innerHTML = document.body.innerHTML.replace(/%\\\[/g, '<div class=\"maths\">');
	document.body.innerHTML = document.body.innerHTML.replace(/%\\\​]/g, '</div>');
	  // put back eg \\[1ex]
	document.body.innerHTML = document.body.innerHTML.replace(/%​%​%/g, '\\\\\[');
	  // replace %( ...%) by <span class="maths"> ... </span>
	document.body.innerHTML = document.body.innerHTML.replace(/%\\\​(/g, '<span class=\"maths\">');
	document.body.innerHTML = document.body.innerHTML.replace(/%\\\​)/g, '</span>');
	  // put back text dollar signs
	document.body.innerHTML = document.body.innerHTML.replace(/\%\%/g, '\\$');
	
	  // Get all <div or span or p class ="maths"> elements in the document
	var x = document.getElementsByClassName('maths');

	  // go through each of them in turn
	for (var i = 0; i < x.length; i++) {
	try {
		if(x[i].tagName == "DIV"){
			t= katex.render(x[i].textContent,x[i],{ displayMode: true }); 
		} else {
			t= katex.render(x[i].textContent,x[i]);
		}
	}
	catch(err) {
		x[i].style.color = 'red';
		x[i].textContent= err;
		}

	}
	  // Optional. Allows use of delimiters in document without them being replaced
	  // Use \\$ or %​% for %%, %​[ for %[, %​] for %], %​( for %(, %​) for %)
	  // the following will convert them to the appropriate delimiters
	document.body.innerHTML = document.body.innerHTML.replace(/\%\%[/g, '\\%[');
	document.body.innerHTML = document.body.innerHTML.replace(/\%\%]/g, '\\%]');
	document.body.innerHTML = document.body.innerHTML.replace(/\%\%(/g, '\\%(');
	document.body.innerHTML = document.body.innerHTML.replace(/\%\%)/g, '\\%)');
}

References

I am grateful to the following as without them this simple guide could not have existed

[1] KaTeX
[2] KaTeX - a new way to display math on the Web
[3] KaTeX Demo
[4] JavaScript RegExp Reference

Steve Mayer