MathJax TypeSetting - mathjax

Question

I'm using MathJax for my personal blog (hosted on Github using Jekyll).
I notice that MathJax equations flicker when I refresh the page, the font was originally relatively small, and it looks thin, and less than half a second later, it would refresh and become much bolder.
I think I like the thin font style and smaller equations (that look much better inline with text) than the bolder version, so I try to configure it but failed. This is the documentation I'm looking at right now: http://docs.mathjax.org/en/latest/options/output-processors/HTML-CSS.html#configure-html-css
Here is my set up that's not working:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$']],
processEscapes: true,
skipTags: ["script","noscript","style","textarea"],
preferredFont: "TeX",
scale: 90,
EqnChunkFactor: 1,
EqnChunk: 1,
EqnChunkDelay: 10
}
});
</script>
<script
type="text/javascript"
charset="utf-8"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script
type="text/javascript"
charset="utf-8"
src="https://vincenttam.github.io/javascripts/MathJaxLocal.js">
</script>
On the side note, I also have this annoying error message MathJaxLocal.js:1 Uncaught ReferenceError: MathJax is not defined.
Would really appreciate if someone answers this question!!

Answer 1

You're asking two fairly different questions but let me wrap them together anyway.
flickering
The "flickering" is (probably) the PreviewHTML output )docs). This may be surprising but comes from the fact that the combined configuration file you're loading (TeX-AMS-MML_HTMLorMML) MathJax will run the PreviewHTML output first, then the HTML-CSS output (cf. the combined config docs and the fastpreview extension docs.
You can use the PreviewHTML output like any other output manually but keep in mind that it is a far less complete (but faster) output processor which does not require webfonts (but uses whatever Times-like fonts the system has).
So following the configuration docs, something like
MathJax.Hub.Config({
messageStyle: "none",
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/PreviewHTML"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
skipTags: ["script","noscript","style","textarea"]
}
TeX: {
// whatever is in MathJaxlocal.js
}
});
MathJax not defined
The error is due to the fact that all scripts on the page are loaded asynchronously. Very likely, MathJaxlocal.js will load and execute before MathJax.js (since it's on the same domain).
You'll need to ensure that the configuration is loaded before MathJax is. Luckily, MathJax can do that for you cf the docs.
Put your configuration in MathJaxLocal.js and then only load
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=https://vincenttam.github.io/javascripts/MathJaxLocal.js"></script>
See the link on how to add other configuration files, including combined ones from the CDN - which would make sense if you want to go back to a full output processor as the combined configurations are packaged more efficiently.