Using LaTeX in Markdown files
A colleague of mine saw a post I wrote and asked me how I was able to write LaTeX in markdown files. This post is for people who appreciate the power LaTeX provides for technical writing. Let’s begin with an example.
Euler’s equation is one of the most interesting equations in mathematics.
\[\begin{equation} e^{\iota \pi } + 1 = 0 \end{equation}\]It contains five of the most significant constants $e$, $\iota$, $\pi$, $0$ and $1$.
The example above uses equation numbers, math symbols in display mode and in-line and is generated from the source code given below:
Euler's equation is one of the most interesting equations in mathematics.
$$
\begin{equation}
e^{\iota \pi } + 1 = 0
\end{equation}
$$
It contains five of the most significant constants $e$, $\iota$, $\pi$, $0$ and $1$.
To enable LaTeX I added the following Javascript file in the default.html
template file in my blog.
<script>
MathJax = {
loader: {load: ['[tex]/textmacros']},
tex: {
packages: {'[+]': ['textmacros'] }, // extensions to use
inlineMath: [['$','$'], ['\\(', '\\)']], // start/end delimiter pairs for in-line math
displayMath: [ ['$$', '$$'], ['\\[', '\\]'] ], // start/end delimiter pairs for delimiter math
processEscapes: false, // use \$ to produce a literal dollar sign
processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
processRefs: true, // process \ref{...} outside of math mode
digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/, // pattern for recognizing numbers
tags: 'ams', // controls whether equations are numbered or not
tagSide: 'right', // side for \tag macros
tagIndent: '0.8em', // amount to indent tags
useLabelIds: true, // use label name rather than tag for ids
maxMacros: 1000, // maximum number of macro substitutions per expression
maxBuffer: 5 * 1024, // maximum size for the internal TeX string (5K)
formatError: (jax, err) => jax.formatError(err) // function called when TeX syntax errors occur
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
The first script allows the user to customize MathJax options. For more details on how to customize see Tex Input Processor Options and MathJax Input in the MathJax documentation. The second script loads MathJax from a CDN into the webpage bypassing the requirement to have MathJax installed on the server.
This blog uses a popular Jekyll theme called minima. To enable LaTeX in Jekyll, copy the javascript
above into a file, say mathjax.html
. Save the file in the _includes
folder of the theme and
include the mathjax.html file after the header in default.html
. See an example
here.
Now, you are all set to TeX it up!