How enable MathJax functionality on Heroku

Question

I am kinda new to both the Python language and the Heroku web interface to web-app deployment. My background is engineering, and MATLAB programming so the whole rails/web scene is new to me. But I am trying to learn the basics for an upcoming project. Towards this end, with the help of a few tutorials around the web, I have managed to successfully couple of Python/NumPy + Flask based apps:

https://matrix-spectrum.herokuapp.com/

https://plot-damped-sinusoid.herokuapp.com/

But as you can already see, in the second link, the LaTeX/MathJax mark-up is not displaying correctly. Whenever I run it on my localhost it works correctly (heroku local web), but once it is deployed that MathJax does not display.

How do I fix this? Why isn't adding:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {
     equationNumbers: {  autoNumber: "AMS"  },
     extensions: ["AMSmath.js", "AMSsymbols.js", "autobold.js", "color.js"]
  }
});
</script>
<script type="text/javascript"
 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

in the header working? The closest question/answer I can find is:

https://groups.google.com/forum/#!topic/mathjax-users/Rpa_WQ6rMkE

But that is about 5 years, old and I suspect there should be more recent developments like:

https://github.com/pmq20/mathjax-rails

But I have no experience with "rails".

Answer 1

Those links use the HTTPS (encrypted HTTP) protocol, but modern browsers often refuse to load unencrypted content if the main connection is encrypted. This is called mixed content.

Your link to load the MathJax library hard-codes an unencrypted HTTP connection:

<script type="text/javascript"
 src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

You could switch http:// for https://, but a better approach is probably to simply use //:

<script type="text/javascript"
 src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

This makes your link protocol-relative; it will load using the same protocol as the page itself.

I encourage you to learn about your browser's developer tools, which are a great resource when doing web development. The console included there often reveals this type of problem.