Issues with deploying MathJax 3 on a Hugo Netlify site

support
,
1

Hi All,

My MathJax loads correctly when previewing my website locally and renders equations 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

However, MathJax does not load remotely on my site: Arranging a Two-Parameter Gamma Distribution into Exponential Family Form | Hua (Wally) Xie's Digital Outpost [Site In Progress]. I don’t get an error message for the loading of MathJax from browser consoles.

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 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/>

Additionally, I tried fully deleting the Polyfill line from my mathjax_load.html file, but MathJax still shows no signs of loading on browser consoles.

Was asking for some help to see if there was something blatantly wrong with my code, or whether this could be a Netlify issue. Thank you all very much for your time and help.

2

I guess similar issue to Mathjax rendering problems due to backslashes interpretation by Markdown processor

Try this:
original -
$$f(x) = \zeta (s)$$
changed -

$$
f(x) = \zeta (s)
$$
3

This means there is a difference between what is on your local and what is on Netlify.

Are you using the same Hugo version on both?

4

I already had it as

$$
...

but thank you for the tip.

My code for the post is as follows:

---
title: Arranging a Two-Parameter Gamma Distribution into Exponential Family Form
date: 2020-12-23
tags: [exponential family, latex, mathjax, statistics]
mathjax: TRUE
slug: "gamma-distribution-exponential-family"
---

**Note: MathJax 3, Hugo, and Netlify just aren't playing nice for some reason, so pardon any \\(\LaTeX\\) spillage.**

A probability distribution function (PDF) is part of the exponential family if it can be arranged into the form

`$$
f(x|\theta) = h(x)c(\theta)\exp\left(\sum_{i=1}^kw_i(\theta)t_i(x)\right)
$$`

where \\(\theta\\) is the vector of parameters. The shape-scale parameterization of the Gamma distribution PDF takes the form

`$$
f_X(x) = \frac{1}{\Gamma(k)\beta(k)}x^{k-1}e^{-\frac{x}{\beta}}
$$`

We use \\(\beta\\) to notate the rate parameter in the shape-rate parameterization of the Gamma PDF, while \\(k\\) is the symbol for the scale parameter.

Can we arrange that PDF into an exponential family form? Spoiler: Yes. Here, we demonstrate that a Gamma PDF given two unknown parameters, \\(\beta\\) and \\(k\\), belongs to the exponential family. 

We start by re-arranging the Gamma distribution:

`$$
\begin{align}
f(x|k,\beta) &= \frac{1}{\Gamma(k)\beta(k)}x^{k-1}e^{-\frac{x}{\beta}}\\\ 
&= \frac{1}{\Gamma(k)\beta(k)}e^{(k-1)\ln(x)}e^{-\frac{x}{\beta}}\\\ 
&= \frac{1}{\Gamma(k)\beta(k)}e^{(k-1)\ln(x) - \frac{x}{\beta}}
\end{align}
$$`

The log identity \\(x^b = e^{b\ln(x)}\\) is a very useful logarithmic identity to remember when trying to arrange PDFs into exponential family form. 

Subsequently, let \\(h(x) = I\_{x>0}(x)\\) (If you see that \\(h(x) = 1\\), that is a cue to use an indicator function that ranges through the support of \\(x\\) when shaping functions into exponential family form.) Hence, we assign pieces of the re-arranged Gamma PDF to their corresponding exponential family sections:

`$$
\begin{align}
h(x) &= I_{x>0}(x)\\\
c(k,\beta) &= \frac{1}{\Gamma(k)\beta(k)}\\\
w_1(k,\beta) &= k - 1\\\
w_2(k,\beta) &= -\frac{1}{\beta}\\\
t_1(x) &= \ln(x)\\\
t_2(x) &= x
\end{align}
$$`

Hence, the Gamma distribution given unknown parameters \\(\beta\\) and \\(k\\) constituting a two-dimensional parameter vector \\(\theta\\) can be shown to be part of the exponential family. A similar process will apply for showing that a Gamma PDF with one unknown parameter, \\(\beta\\) or \\(k\\) is also part of the exponential family.

The mathjax: TRUE is a useless part that I should have deleted; corresponds to an older version of my partials script.

hugo version shows I am running 0.80 locally, and in my netlify.toml file, I have

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.80.0"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.80.0"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.80.0"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.80.0"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

So, the Netlify version should also be 0.80.

That said, if there was a version mismatch, there still should have been an error message for not properly loading MathJax, right? I’m very perplexed that no error message has come up, which seems to me as if there’s been no attempt to load MathJax and that it is just blocked.

5

Do you have your site repo somewhere we can have a look at? I don’t see anything from the mathjax_load at all on your published site.

6

Yes, it’s strange that there is not even an error message in the console mentioning that MathJax is failing to load when it loads fine locally.

Here is my website repository: https://github.com/wallyxie/wallyxie.github.io. Again, much appreciation for getting back to me on this matter so promptly.

7

How are you working with the theme? Is it a git submodule? And how are you making changes to the theme?

8

Thank you so much! This was exactly the problem. I started off with the correct git submodule, but at some point, when attempting a fix, did an improper git clone because I foolishly forgot the proper step. Things are working now, and the theme edits are properly updating.

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.