CyberSecurity // Azure // Frontend // Svelte // Cloud Native // Software // CyberSecurity // Azure // Frontend // Svelte // Cloud Native // Software

Rendering mathematical equations

Cover for Rendering mathematical equations

Rendering mathematical equations

For a while I've been wanting to expand the capabilities of my blogging setup to allow for the rendering of mathematical equations. There were a few requirements for doing so:

GitHub support

Since the 19th of May 2022 [1] GitHub supports the rendering of equations in TeX format. TeX [2] is a mathematical typesetting system released in 1978 by computer scientist Donald Knuth . It allows for free, accessible and reproducible results. It is still wildly used in academics to this day. Below is an example of how TeX notation get's converted:

From TeX notation to rendered output

Image: From TeX notation to rendered output

GitHub makes use of MathJax to render these equations under the hood. There are two ways [3] to indicate a piece of text is a mathematical equation:

Since my current blogging setup already uses triple backticks to display code, it seems to be the most straight forward solution. This means that we can write our equation as code with the language set to 'math', while still being valid Markdown syntax:

TeX syntax as valid markdown by making use of a code block

Image: TeX syntax as valid markdown by making use of a code block


At this point we have satisfied 2 out of the 3 requirements: Markdown syntax and rendering on GitHub. The most important one remains: rendering our equations into HTML. For this I've opted for the NPM package Mathlifier . It is a wrapper around KaTeX , which in its turn is a package for rendering TeX equations on the web!

Because all code blocks are rendered by a separate Svelte component, I can now add some logic to detect when the code language is set to 'math' like so:

// SVELTE //

Inside of the Math.svelte component I can make use of Mathlifier to correctly display the equation like so:

// SVELTE //

And that's how I render TeX syntax to HTML on this blog!

An example with the quadratic formula

Below is an example where a proof is shown for the quadratic formula:

Let a, b, and c be real number. The solutions of

ax2+bx+c=0 ax^2+bx+c=0

can be defined as:

x=b±b24ac2a x=\frac{-b\pm \sqrt{b^2-4ac}}{2a}


Proof. In order to prove the quadratic formula, we use the process of completing the square. Starting with

ax2+bx+c=0 ax^2+bx+c=0

arithmetic gives us

ax2+bx=c ax^2+bx=-c
x2+bax=ca x^2+\frac{b}{a}x=-\frac{c}{a}
x2+bax+b24a2=ca+b24a2 x^2+\frac{b}{a}x+\frac{b^2}{4a^2}=-\frac{c}{a}+\frac{b^2}{4a^2}
(x+b2a)2=4ac4a2+b24a2 \Bigg(x+\frac{b}{2a}\Bigg)^2=-\frac{4ac}{4a^2}+\frac{b^2}{4a^2}
x+b2a=±b4ac4a2 x+\frac{b}{2a}=\pm\sqrt[]{\frac{b-4ac}{4a^2}}
x=b±b24ac2a x=\frac{-b\pm\sqrt[]{b^2-4ac}}{2a}

The above proof serves as a stress test of some kind, rendering multiple complex and nested equations. The TeX syntax for this proof is taken from a public template on OverLeaf [4] .