Issues with loading MathJax (math equation renderer) on Hugo Netlify site

Support
, ,
1

Hi Netlify support (and others who may potentially have experience in this issue),

I’m having some issues loading MathJax 3 on my Hugo website deployed via Netlify. MathJax loads properly when I preview my website locally. However, remotely, things do not work as expected. I have read that Netlify may interrupt rendering of math by pruning $ symbols (no longer can find a source for that at the moment, so that could be wrong) and I have also read the following post from last year (Enabling MathJax without using CMS - #5 by novice), so I was wondering whether the issue could be tied to Netlify. Looking at the page in question through Firefox and Safari consoles (Arranging a Two-Parameter Gamma Distribution into Exponential Family Form | Hua (Wally) Xie's Digital Outpost [Site In Progress]), the error messages seem to correspond to the Polyfill.js library, and I do not see any errors associated with MathJax.

Thank you very much for any possible help!

EDIT: As an addendum, deleting the Polyfill line from the html file that loads MathJax did not do anything, and it looks like MathJax just does not load at all from looking at the console output. Was thinking perhaps something was blocking its loading.

2

Realized I probably needed to provide some more supporting information.

As far as I can tell, having initially followed the steps in this post (Render LaTeX math expressions in Hugo with MathJax 3 · Geoff Ruddock), I think my code for loading MathJax in my Hugo theme partials folder is correct. I have a mathjax_load.html file:

<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$','$$'], ['\\[', '\\]']],
      processEscapes: true,
      processEnvironments: true
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
    }
  };

  window.addEventListener('load', (event) => {
      document.querySelectorAll("mjx-container").forEach(function(x){
        x.parentElement.classList += 'has-jax'})
    });

</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

that is called by my header.html file:

<html lang="{{ .Site.LanguageCode }}">
  <head>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom&#45;one&#45;light.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <link rel="manifest" href="/images/site.webmanifest">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
    <title>{{ .Title }} | {{ .Site.Title }}</title>
    <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}" />
    <link rel="stylesheet" href="{{ "/css/fonts.css" | relURL }}" />
    {{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
    {{- end }}
    {{ partial "mathjax_load.html" . }}
    {{ partial "head_custom.html" . }}
  </head>

  <body>
    <br/>

Locally, my page looks as expected:

Screen Shot 2021-01-14 at 2.40.53 PM
Screen Shot 2021-01-14 at 2.40.53 PM2880×1394 386 KB

The Netlify deployment on the other hand does not render any of the LaTeX code without the loading of MathJax, as can be seen via Arranging a Two-Parameter Gamma Distribution into Exponential Family Form | Hua (Wally) Xie's Digital Outpost [Site In Progress]

3

I checked the source of that webpage and I don’t see the MathJax-script inserted on the page. That’s the cause probably.

Maybe if you can share the repo, it can get easier to see what’s happening.

4

Thank you for getting back to me. Yes, am stumped for why MathJax is not loading at all, not even an error message from the console about a failure to load. Here is my repository, thanks: https://github.com/wallyxie/wallyxie.github.io

5

I figured out the problem. At some point, the theme stopped updating because in an attempted re-install, I used git clone over a previous git submodule. Thank you very much for your help, the issue is fixed now.

6

I have the same problem. In my case, what I notice is that Github pages can display locally hosted MathJax, but not with Netlify.

Here is a page as displayed with netlify:

Here is the same under Github pages

As you can see, netlify does not display MathJax even though Github pages is able to display it.

7

Hi @rahulgopinath :wave:t6:, welcome back to the forums! :netliconfetti: Sorry to hear you are having issues with your site. It’s likely an issue with your code.

These seems to be a similar issue with other people using MathJax on a Hugo framework. Can you give this thread a read and let me know if adding backslashes help resolve the the code displays?

If that doesn’t help can you please share you repository, site name and build log? :smile:

Thanks so much.