MathJax

A short description of the post.

Estimated reading time: 2 minute(s).

In this post, I wanted to show you an example of a different type of text formatting that can be added to your documents, specifically using MathJax to write mathematical equations. The Distill framework supports MathJax syntax, so as far as I know, you do not need to install anything special. If you have a problems using MathJax in your document, please let me know.

MathJax is a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup. There is no need for end user software installation. We can render right in the HTML.

MathJax has its own lightweight code that is usually wrapped in dollar signs ($). If you hover over your text while you write it, a little preview window should pop up that shows you what the final equation will look like. This way you can tweak the look before you render the document. MathJax code can be written straight in the document. When R Studio renders the document it will see the $, interpret it as MathJax code, and translate the code to MathJax typography.

MathJax syntax can be a little tricky at first, but if you persevere—especially if use equations in your work—you will not be disappointed. MathJax typography is elegant .

Here is the notation for one of my favorites, the Lorenz equations. I am showing the actual code here for demonstration purposes only. Normally this would be hidden.

So this awkward looking code…

$$
\begin{cases}
\dot{x}  = \sigma(y-x)  \\
\dot{y} = \rho x - y - xz  \\
\dot{z} = -\beta z + xy
\end{cases}
$$

…becomes these elegant equations.

\[ \begin{cases} \dot{x} = \sigma(y-x) \\ \dot{y} = \rho x - y - xz \\ \dot{z} = -\beta z + xy \end{cases} \]

Nice. You can also use simple inline expressions where an equation like this $e^{i\pi} + 1 = 0$ looks like this \(e^{i\pi} + 1 = 0\).

Or this equation $f(k) = {n \choose k} p^{k} (1-p)^{n-k}$ is rendered like this \(f(k) = {n \choose k} p^{k} (1-p)^{n-k}\).

Source Code

The source code for this page can be accessed on GitHub by clicking this link.