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!
I am quoting the required code snipped straight from the official getting started page linked above:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js"></script>
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!