To talk math related topics, it is essential to be able to render LaTeX code on my webpage. There is a quick way to implement this feature using MathJax. Have a look at the official getting started information. It is quite simple: Add the script somewhere in your pages, so that it is picked up by Jekyll. You now have a JavaScript display engine for mathematical notation working on your page!
One line in the article layout is all it takes (this is the MathJax 4 script from the official getting started page):
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js"></script>
On this site the script is only included when an article sets math: true in its front matter, so pages without formulas don’t load it. Older versions of the getting started page also listed a polyfill.io script for legacy browsers – don’t use it, the domain was taken over and used to serve malware in 2024.
I noticed some issues when not placing the LaTeX code inside a <p> or <div>, particularly when using longer statements including text inbetween formulas. Adhering to this convention of using either of the tags fixed the problem for me, with formulas rendering as expected. It’s a good enough fix for my use case, so I will leave it at that.
This is the example from the MathJax getting started documentation.
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are: \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
The markdown code that I used to generate this example looks like this:
<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are:
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>
It is also possible to use inline LaTeX by wrapping your code in double-dollar-signs like this: $$ 3\ne2 $$, which will give us the following rendered output:
I hope you enjoyed this article, that’s it for now - thanks for stopping by!