Julius Nick

# LaTeX in Jekyll using MathJax

##### February 2021 -- LaTeX, MathJax, Jekyll

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.

## What does it look like on markdown page?

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:

$3\ne2$

## And that’s it…

I hope you enjoyed this article, that’s it for now - thanks for stopping by!