With the intention to share my learnings related to operations research, I have to find a way to render mathematical formulas inside my posts. Luckily, there already exist some excellent approaches for this purpose and MathJax is one of the best among them. I used MathJax before with the previous theme mainroad, but couldn’t remember how it was configured in the first place. With a bit duplicate work of digging online, I found the original solution and wanted to share it here in case I forgot it some days later.
Credits to the Original Post
The solution was posted here (with link to the original post shown below). All credits to this approach should be given to the original author.
https://pennbay.github.io/tech/mathjax.with.hugo/
Solution
Below shows all the directories and files within the root directory of this site. In my case, the root directory is ~/dev/blog/klian-site:
total 16
drwxr-xr-x 3 klian 74715970 96B Aug 17 13:03 archetypes
-rw-r--r-- 1 klian 74715970 1.5K Aug 19 20:27 config.toml
drwxr-xr-x 4 klian 74715970 128B Aug 19 08:29 content
drwxr-xr-x 2 klian 74715970 64B Aug 17 14:26 data
-rwxrwxrwx 1 klian 74715970 537B Aug 17 15:05 deploy.sh
drwxr-xr-x 5 klian 74715970 160B Aug 17 13:17 layouts
drwxr-xr-x 27 klian 74715970 864B Aug 30 1754 public
drwxr-xr-x 3 klian 74715970 96B Aug 17 13:05 resources
drwxr-xr-x 4 klian 74715970 128B Aug 17 13:11 static
drwxr-xr-x 3 klian 74715970 96B Aug 17 13:04 themes
Create a partials directory within the layouts directory:
~/dev/blog/klian-site/layouts ll
total 0
drwxr-xr-x 3 klian 74715970 96B Aug 17 13:17 _default
drwxr-xr-x 4 klian 74715970 128B Aug 19 20:31 partials
drwxr-xr-x 3 klian 74715970 96B Aug 17 13:17 shortcodes
Then create a file mathjax_support.html with content below within the partials directory:
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\[','\]']],
processEscapes: true,
processEnvironments: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
</script>
The last thing to do is to add the mathjax_support.html to the header file:
<link rel="stylesheet" href="/css/tweaks.css"/>
{{ partial "mathjax_support.html" . }}
My partials directory now looks like this:
~/dev/blog/klian-site/layouts/partials ll
total 16
-rw-r--r-- 1 klian 74715970 87B Aug 19 20:31 head_custom.html
-rw-r--r-- 1 klian 74715970 553B Aug 19 20:30 mathjax_support.html
We’ve successfully setup MathJax now!
Usage
Now let’s play with some math symbols. To do inline math, the code below
I am an inline variable $x_i$.
produces I am an inline variable $x_i$.
For display mode, use double $ mark:
$$
\begin{align}
\text{min.} \quad & \sum_{i = 0}^{\infty}x_i \newline
\text{s.t.} \quad & x_i \in {0, 1}
\end{align}
$$
renders $$ \begin{align} \text{min.} \quad & \sum_{i = 0}^{\infty}x_i \newline \text{s.t.} \quad & x_i \in {0, 1} \end{align} $$.
Reference
- Setting MathJax with Hugo, https://divadnojnarg.github.io/blog/mathjax/