Add Mathjax to Hugo

Posted on Mar 26, 2022

Code copy&paste from Ataias Pereira Reis’s PR adityatelange/hugo-PaperMod#140 with some modifed on toggle option.

Creat two files under layouts/partials/.

Create math.html:

<script
  type="text/javascript"
  async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
>
  MathJax.Hub.Config({
      tex2jax: {
          inlineMath: [['$', '$'], ['\\(', '\\)']],
          displayMath: [['$$', '$$']],
          processEscapes: true,
          processEnvironments: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
          TeX: {
              equationNumbers: { autoNumber: "AMS" },
              extensions: ["AMSmath.js", "AMSsymbols.js"]
          }
      }
  });
  MathJax.Hub.Queue(function () {
      // Fix <code> tags after MathJax finishes running. This is a
      // hack to overcome a shortcoming of Markdown. Discussion at
      // https://github.com/mojombo/jekyll/issues/199
      var all = MathJax.Hub.getAllJax(), i;
      for (i = 0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
      }
  });
  MathJax.Hub.Config({
      // Autonumbering by mathjax
      TeX: { equationNumbers: { autoNumber: "AMS" } }
  });
</script>

Create extend_head.html:

{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

In config or page’s front matter set math: true, then use LaTex.

$$y =x$$

$$y =x$$

test $y=x$ inline

test $y=x$ inline

中文