KaTex 101 for Programmers
This article is part of my web development series 'webDEV101'. You can read the whole series here:
Ron Chou
KaTex?
KaTex is a Javascript math rendering library for displaying mathematical equations over the web. Originally developed for use on Khan Academy, it is a faster alternative to MathJax, the conventional solution used on popular sites such as MathOverflow.
Video credit: https://katex.org
KaTex load time: 3s | MathJax load time: 12s
Learn KaTex if you wish to display mathematical equations over the web.
Setup
LaTex is rendered by two Javascripts and a CSS stylesheet. You can directly link to the online copies provided by JSDelivr (shoutout to Dmitriy Akulov & crew!) by including the following lines in your HTML header:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>If you are using a content management system, such as Ghost, you will want to inject these lines in your page/site-wide header:
Alternatively, download the scripts and the stylesheet and include them in your website assets.
If KaTex is working properly, you should see the rendered result like this:
Test your setup with a simple inline equation \(1+1=2\).
and a block equation: \[a/b=c\]
As seen, the general syntax for inline equations is \( KaTex code \), and the general syntax for block equations is \[ KaTex code \]*.
*: For Markdown users, \ is a special character in Markdown, and you need to escape it with another \. So \\( KaTex code \\) and \\[ KaTex code \\].
Syntax
KaTex, like LaTex, uses Donald Knuth’s TeX rendering engine. The math syntax in KaTex and LaTex is nearly identical.
Basic operators
The rule of thumb is that if something can be typed out on your keyboard, type it out directly. Otherwise, there is probably a \command for that.
The four basic arithmetic operators are listed below:
| Displayed Operator | KaTex Code |
|---|---|
| \(+\) | + |
| \(-\) | - |
| \(\cdot\) | \cdot |
| \(/ \) | / |
| \(=\) | = |
Notice the division must be a backward slash/. A forward slash is a special character used to render mathematic symbols in KaTex, such as \cdot for \(\cdot\), and will not render literally.
A complete list of available functions can be found here:
It is best to learn the syntax interactively by exploring an online LaTex equation builder, such as this one:
Happy mathtyping! -Ron
Copyright Statement
Énoncé du droit d'auteur
Much of our content is freely available under the Creative Commons BY-NC-ND 4.0 licence, which allows free distribution and republishing of our content for non-commercial purposes, as long as Ronzz.org is appropriately credited and the content is not being modified materially to express a different meaning than it is originally intended for. It must be noted that some images on Ronzz.org are the intellectual property of third parties. Our permission to use those images may not cover your reproduction. This does not affect your statutory rights.
Nous mettons la plupart de nos contenus disponibles gratuitement sous la licence Creative Commons By-NC-ND 4.0, qui permet une distribution et une republication gratuites de notre contenu à des fins non commerciales, tant que Ronzz.org est correctement crédité et que le contenu n'est pas modifié matériellement pour exprimer un sens différent que prévu à l'origine.Il faut noter que certaines images sur Ronzz.org sont des propriétés intellectuelles de tiers. Notre autorisation d'utiliser ces images peut ne pas couvrir votre reproduction. Cela n'affecte pas vos droits statutaires.
Member discussion