Write Math Equation on The Web Using Katex

Writing a Mathematics equation on the web is hard. Math equation contains various letters and symbols. Websites are not commonly design to display these equations properly. In a webpage, developer use HTML to write the document markup. Even if a developer decides to make his website support mathematics notations, the HTML support itself is close to non-existent.

In the HTML5 spec, a <math> element exists to display MathML equations. In an ideal world, we developers should use <math> element to write math equations. But, In reality, it is very hard to write the equation that way. If somehow you managed to write an equation in MathML, the browser support is very poor.

Therefore, to write any type of algebraic or arithmetic expression on the web, we need to use a 3rd party library. Now you may ask, how these libraries make the impossible possible? The short answer is, they use some short of hacky way to get the job done.

Elaborately, these libraries parse your equation and split it down to several HTML and SVG elements. Then apply styling and position to those components using CSS and JavaScript.

KaTex and MathJax are the 2 most popular library which you want to consider to write math equation on the web. In this blog, you will learn how to use KaTex in your website and write beautiful equations. We will talk about MathJax on the later part of this blog.

Before beginning, I want you to know that these libraries use Tex notation to render the equation on your web page. I will give a brief Idea of how to write an equation in Tex notation. You can see this FreeCodeCamp video about Latex to learn more.

Introducing KaTex — A library to write math the web

KaTex is a Math typesetting library developed by Khan Academy. If you are a student, you must have heard about Khan academy.

KaTex is the fastest library to write math equation in a website. Although this speed comes with a little penalty. The KaTex library doesn’t support full Tex notation.

If you want the complete Tex support, you should go with MathJax. MathJax is not as fast as KaTex, but it’s support vast majority of Tex notation.

I choose KaTex because I find it simple and fast. I don’t write any obscure math equations, therefore I am good with KaTex.

Set up KaTex on your website project

KaTex is a JavaScript library, and you can either use it in the browser or render the equation in the server using Node.js. KaTex is a pure JavaScript library. Therefore, it runs wherever a JavaScript environment is present.

To use KaTex in the browser, just add the following tags above your closing </head> element in the HTML file.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
  crossorigin="anonymous"
/>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
  crossorigin="anonymous"
></script>

In addition, to automatically render your Tex notation present in the HTML document into mathematical equation, add the following line.

<script
  defer
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
  crossorigin="anonymous"
  onload="renderMathInElement(document.body);"
></script>

If you don’t want to run the KaTex library automatically on page load, remove the onload part.

You can also use NPM to install KaTex in your project. If you are using a JavaScript framework like React or Vue, installing via NPM may be a better option.

npm install katex

Use KaTex to parse and render math equation on a webpage

Inside your JavaScript file, add the following code to render Math equation automatically.

document.addEventListener("DOMContentLoaded", function () {
  renderMathInElement(document.body, {
    delimiters: [
      { left: "$$", right: "$$", display: true },
      { left: "$", right: "$", display: false },
      { left: "\\(", right: "\\)", display: false },
      { left: "\\[", right: "\\]", display: true },
    ],
    throwOnError: false,
  });
});

In the delimiters field, you can set left and right delimiters to let KaTex know where your equation start and end. The KaTex library parse the text only inside those delimiters you have assigned.

The display parameter means how you want to place your equation in a paragraph. If display is set to false, the equation will render inline. If display is set to true, the equation will be rendered in a new line.

In the 3rd line of the above code example, left parameter is set to \$ and write to \$. It means if your Tex notation is surrounded by \$ Your Tex Notation \$, then KaTex will render the equation.

Let’s take an example. If I write what is the value of $$2^2$$, KaTex recognize the 2^2 part (because we have set this delimiter in the settings above, see the code example) and render 22 in a new line, as display property is set to true for $$ delimiter.

Some basic TeX syntax to write math equation

These are the very basic Tex notation to write Math equations in your website. To know more advance notation and see what KaTex supports, please visit their support functions and support table page.

Write a fraction: To write a fraction, you need to use the \frac syntax. For example, you need to write 1/2, so the equivalent Tex notation will be \frac{1}{2}. Enclose this notation inside single $ or double $$ to place the equation inline or newline, respectively.
Write Power: To write x raise to the power 2, use {x^2}. To write x raise to power 2 that raise to power 2, write {x^{2}}^2.
Write Square root: To write square root of 2, use \sqrt{2}. To write cube root or any other root, use \sqrt[3]{x}. Here, instead of 3, you can put any number.
Write multiplication symbol: To write multiplication symbol, use \times. To write 2×3, use 2 \times 3
Write division symbol: To write division symbol, use \div. e.g., 2 \div 3
Trigonometric functions: For every trigonometric function, there exists a similar named Tex notation. For example, \sin, \cos, \tan etc.

A brief introduction to MathJax

MathJax development started before KaTex. It has a very huge community around it. MathJax is a sponsored project of The Numfocus foundation. It has some very big name as their partners and supporters. You can read about it on their homepage.

As I have previously mentioned, MathJax is very capabler than KaTex. It supports the full Tex markup and for some project, this is what is wanted. There shouldn’t be any MathJax vs. KaTex debate. Always use the right tool for the job.

If your site is heavily geared towards scientific community, or want to support other Physical and Chemical notation in addition to mathematical equation, go with MathJax. The performance is not up to the mark as compared to KaTex, but you have to bear this performance penalty for larger inclusivity.

It is very important to note that, when I am talking about performance, I am considering 100 or more Tex markups in a single web page. For a smaller set of equations, performance difference is negligible.

If you want to add some math equation on your site but supporting full Tex notation is not your primary focus, you should go with KaTex. It is lighter and performant. We all know that performance play a role in SEO.

Conclusion

It is very disheartening that rendering scientific notation is still not a priority in the web development landscape. This is a very niche topic and not every developer is aware of this issue. Support for <math> and MathML may be better in the future. But MathJax and KaTex library is here to fill this gap. These libraries are very good, and you shouldn’t hesitate to use this in your future projects.