How to Add MathJax to Your Hugo Blog


At first when trying to set up my blog with math support, I consulted the Hugo Documentation to find out what it said about it. It just said to add the MathJax script to a partial template that would be included in every page that needed MathJax, such as the footer partial template.

The problem was that I am using my theme as a git submodule, which means that I cannot edit anything within it without making a pull request to the remote repository, in this case being https://github.com/budparr/gohugo-theme-ananke. So I asked Bud Parr, the author of the theme, how to add this script to the partial template without editing the theme.

In this github issue, Bud Parr answered my question, stating that all I needed to do was make a duplicate of https://github.com/budparr/gohugo-theme-ananke/blob/master/layouts/partials/site-scripts.html, which is a partial template for adding scripts to every page, and move the duplicate from /themes/ananke/layouts/partials/site-scripts.html to /layouts/partials/site-scripts.html.

After that, I updated my script to include David Granjon’s improvements to setting up MathJax with Hugo, which involved making MathJax not skip code blocks and fixing the CSS of codeblocks that MathJax decided were math. But you can really just copy and paste it.