KaTeX¶
KaTeX is a fast math typesetting library for the web. It uses javascript for client-side rendering.
This guide shows how to include KaTeX from a CDN and automatically render all latex content on your page. This is done using the auto-render.js script included in KaTeX.
If you do not want to use a CDN, you can download the files and host them on your page.
Example usage¶
Inline¶
This $\int\limits_1^\infty \frac{1}{k}\,dk$ is inline.
This $\int\limits_1^\infty \frac{1}{k}\,dk$ is inline.
Separate paragraph¶
$$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$$
How to use KaTex on your page¶
Add the following inside the html <head></head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH" crossorigin="anonymous"></script>
Add the following (to the end) inside the html <body></body> section:
<script>
renderMathInElement(
document.body,
{
delimiters: [
{left: "<math>", right: "</math>", display: false},
{left: "$$", right: "$$", display: true},
{left: "$", right: "$", display: false},
{left: "\\[", right: "\\]", display: true},
{left: "\\(", right: "\\)", display: false},
]
}
);
</script>
This script will parse the whole html body and render everything enclosed in the defined delimiters. It also defines some custom delimiters.
Example html files¶
You can find some examples here