MathJax

MathJax is a JavaScript library that allows us to use TeX to render mathematical notation as SVGs. In this case, since I am using Jekyll, I can insert the following markup directly into my Markdown documents:

$$
\vec{p} =
\begin{bmatrix}
1 \\
4 \\
23 \\
\end{bmatrix} \\

\vec{v} =
\begin{bmatrix}
42 \\
2 \\
7 \\
\end{bmatrix} \\

\vec{p} + \vec{v} =
\begin{bmatrix}
43 \\
6 \\
30 \\
\end{bmatrix} \\
$$

…in order to produce vector notation:

…or this:

$$
\exists{x}\forall{y} (\neg{Px}\lor{Qy})
$$

…to produce notation necessary for first-order logic:

…or this:

$$
\text{if } f(x) = x^r, \text{for any real number } r \neq 0 \text{ then}\\
f'(x) = rx^{r-1}
$$

…to get a (somewhat simplified) example of the power rule in Calculus:

In my Jekyll project, I can set a tag in YAML Front Matter and then use this tag to pull in the MathJax library conditionally, based on the presence of this tag in various blog posts. For example, on this particular post, I’ve included this metadata:

---
title: "MathJax"
tags: "MathJax"
---

This allows me to conditionally load a remote script in my head.html include file, depending on whether or not some given post has the appropriate tag:


{% if page.tags contains "MathJax" %}
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
{% endif %}

Doing this will prevent the loading of MathJax when it is not needed.