Mathjax is not working

support
1

I used Mathjax to render Equations on my hugo blog. All of a sudden Mathjax is not working. It renders equations on local environment but not rendering in actual website i am using Gitlab pages as hosting environment

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/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>

This is my mathjax support partial

I have included this in header custom

<header>

  <!--
  Syntax highlighting - defaults to atom light theme.
  List here: https://github.com/isagalaev/highlight.js/tree/master/src/styles
  -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-light.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  {{ partial "mathjax_support.html" .}}
  <nav>
    <ul>
      {{ $title := lower .Title }}
      {{ $section := lower .Section }}
      <li class="pull-left {{ if .IsHome }}current{{ end }}">
        <a href="{{ .Site.BaseURL }}">/home/{{ lower .Site.Title}}</a>
      </li>
      {{ range .Site.Menus.main }}
      {{ $name := lower .Name }}
      <li class="pull-left {{ if eq $name $title }}current{{ else if eq $section $name }}current{{ else if eq $title (pluralize $name) }}current{{ end }}">
        <a href="{{ .URL }}">~/{{ lower .Name }}</a>
      </li>
      {{end}}

      {{ range .Site.Menus.feed }}
      {{ $name := lower .Name}}
      <li class="pull-right">
        <a href="{{ .URL }}">~/{{ lower .Name}}</a>
      </li>
      {{end}}

    </ul>
  </nav>
</header>

link to website post in which mathjax is used Blog post

link to repository of Hugo Hugo repository

Thanks in advance

2

I see that you also use Cloudflare’s Rocket loader feature on your live website. That feature changes how JavaScript files execute on your website. Have you tried disabling that feature to see whether that fixes MathJax?

Here’s more information about Rocket Loader:


1 Like
3

Thank you that is indeed the problem.

4

Anyone have a good way of using a local MathJax (for offline use for example). Hugo server complains about the number of files, likely the fonts in MathJax not sure.

5

Actually, sounds like Hugo Pipes might be the way here.