\(\KaTeX\) is self-promoting itself as the fastest math typesetting library for the web. It is open source and renders TeX mathematics notation as plain html notation, so it can be rendered in any browser.

It is an open source library available on GitHub and if you used LaTeX in the past, you should be pretty accustomed to the notation already.

Since it is the math renderer used in this theme, let’s gather some information on how it is working here and how does the syntax works.

Installation

With self-hosted SASS

For this theme it’s used within the browser, so it’s similar to what’s in the KaTeX website’s installation documentation.

For type-on-strap jekyll theme, katex is self-hosted (with a computed sass, the javascript and the fonts).

Since KaTeX doesn’t provide SCSS files from its distribution, you’ll have to do some manual work. Using the css file as a scss one works, but it’s less ideal.

  • First, you may convert the dist css file to a scss file.
  • Then you will need to create a new $katex-font-path sass variable for the fonts because they are not stored with the style files.
  • Finally, you will update the url(fonts.fontname.xxx) by url("#{$katex-font-path}/fontname.xxx") to use the variable for the font face.

For the javascript side, it’s straightforward, make sure you have it all in the head tag as specified. And it should work. If you would like distributed SCSS files from KaTeX, follow up on this official discussion to push for it! In the meantime, you can continue with the simpler installation process with CDN.

To make it easier to test, you can use the cdn links from the official setup documentation; the setup is quite fast. Check this simple HTML example if you want a quick demo.

<!-- To load the css and the fonts for Katex -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css">

KaTeX requires the use of the HTML5 doctype <!DOCTYPE html>. Without it, KaTeX may not render properly. The auto-render script is there automatically start the rendering is executed once the library is loaded.

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js"></script>
<!-- To automatically render math in text elements -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/contrib/auto-render.min.js"
        onload="renderMathInElement(document.body);"></script>

Put all of that within the head in your html document. In this blog the default settings are fine, but for more information on the auto render script, like which delimiter to use (either $ or $$ by default), be sure to check the documentation.

Usage

Basics

Find in the Katex website’s documentation, some additional information on how to stylize your notation and also a list of all supported notation. Let’s review the basics, using $$ as the default indicator for Katex to render.

If we were to write a dummy problem like, find \(\{ x, y, z \} \in \N\) where:

\[x^2 + y^2 = z^2\]

It is actually written as:

Find $$\{ x, y, z \} \in \N$$ where:
$$x^2 + y^2 = z^2$$

Using multiple lines, when you need to do a demonstration:

\[\begin{equation} \begin{split} (a - b)^2 &= (a - b)(a - b) \\ &= a(a - b) - b(a - b) \\ &= a^2 -ab -ba + b^2 \\ &= a^2 - 2ab + b^2 \nonumber \end{split} \end{equation}\] 
\begin{equation}
\begin{split}
(a - b)^2 &= (a - b)(a - b) \\
&= a(a - b) - b(a - b)      \\
&= a^2 -ab -ba + b^2        \\
&= a^2 + 2ab + b^2          \nonumber
\end{split}
\end{equation}

First you can to use the equation tag that will allow you to write your whole demonstration as just one block (useful if you need to one number (1) to refer to it). Then the split is the one doing most of the trick, using \\ to split lines and &= to align the equals together.

You can remove the line number next to the demonstration with \nonumber at the last line.

Find more supported function in the documentation.

With colours

You can make your notations more lively with columns, inspired by Notion Things article about advanced KaTeX formatting.

Here is what I really found useful, to play with colours, with only one word:

\[This~is~\textcolor{#1f8fff}{Blueish},~that's~it\] 
This~is~\textcolor{#1f8fff}{Blueish},~that's~it

The ~ is used to force space between the words, otherwise it’s all compacted together. The colour can be set via a hex code or via some predefined colours, like in the next example

Or this one that will colour everything, or at least everything until the next colour tag:

\[\color{MediumPurple}{This~is~purple}~and~that~too!?~\color{MediumSeaGreen}{But~not~that!}\] 
\color{MediumPurple}{This~is~purple} ~and~that~too!? ~\color{MediumSeaGreen}{But~not~that!}

Useful ones

Here are table of my favorite ones, that I always forget 😅 This is just a snippet, so be sure to check the supported functions or via the support table for more!

Name Katex Rendered
not equal \not = \(\not =\)
power / under log_{10}(e^{ab}) \(log_{10}(e^{ab})\)
in \in \(\in\)
exist \exist \(\exist\)
imply \implies \impliedby \(\implies \impliedby\)
equivalent \iff \(\iff\)
modulo x \pmod a \(x \pmod a\)
fraction \frac{a}{b} \(\frac{a}{b}\)
special letters \R \N \Complex \(\R \N \Complex\)

The one that should not be needed, but just in case, you can use the % to add comments. For other examples, check the articles tagged with math in this blog.