MathJax Local Configuration File

Motivation

Before I changed the HTML syntax for embedding MathJax with a local configuration file, I often encountered error while viewing the math rendered by MathJax.¹ The custom commands defined in the local configuration file sometimes wouldn’t be converted to mathematical expressions in a post while browsing the page for the first time. Though refreshing the page can get the math shown, it’s quite troublesome. Therefore, I searched for a better way in the official manual.

Problem

I tried following the instructions in MathJax’s official Wiki for using a local configuration file.²

<script type="text/javascript"
	src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML,
	/javascripts/MathJaxLocal.js
">
</script>

Things seems worked, but undesirably slow.

loading time graph

It took about 16 seconds for loading the math. How can they load quicker with a local configuration file, like http://drz.ac?

Cause

I googled “mathjax local config long”, and found a message from this page extremely useful.

You are missing the loacComplete() line in your configuration file, so MathJax waits 15 seconds before timing out and going on without it. Add
Mathjax.Ajax.loadComplete("[Mathjax]/config/local/font.js");
at the bottom of your font configuration file and that should take care of it for you.
Davide P. Cervone Re: Local Configuration File Processing Is Extremely Slow (~15 Sec)

Failed attempts

I tried using relative paths in source/_includes/custom/head.html , {{ root_url }} in the <script> tag that calls MathJax with a local configuration file and in the local configuration file source/javascripts/MathJaxLocal.js. Since this blog has more than 200 pages, it took about a minute for regeneration of contents after each slight modification in the code.

Conclusion

I typed full paths manually for the above <script> tag in the custom head of a page and the local configuration file. To avoid loading “insecure contents”, I used full URLs instead of {{ site.url }} since the URL of this site doesn’t start with “https” in _config.yml.³⁴ Then the equations should load quickly.

loading time graph

Lessons learnt

If I could do the same job again, I’d first change the local configuration file and upload it to GitHub, so that I could test it in a local HTML file file:///path/to/test-mathjax.html

A local testing page for using the MathJax macros (test-mathjax.html) download

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Don't delete!</title>
<script type="text/javascript" charset="utf-8" src="
https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML,
https://vincenttam.github.io/javascripts/MathJaxLocal.js"></script>
</head>
<body>

<p>This page is for testing MathJax in my blog.  I wrote some custom
shorthand like $\zeros \in \R^n$.</p>

<h2>Problem</h2>

<p>For sequences of numbers, <em>limit inferior</em> and <em>limit
superior</em> are defined as $\liminf (a_n):=\sup\{\inf\{a_k:k \ge
n\}\}$ and $\limsup (a_n):=\inf\{\sup\{a_k:k \ge n\}\}$ respectively;
for sequences of sets, they are defined as $\displaystyle
\bigcup_{n=1}^{\infty} \bigcap_{k=n}^{\infty} A_k$ and $\displaystyle
\bigcap_{n=1}^{\infty} \bigcup_{k=n}^{\infty} A_k$ respectively.</p>

<p><strong>Why are they consistent?</strong></p>

<h2>Discussion</h2>

<p>It suffices to find a relation between '&lt;' and '&sube;': $\{x
\le a\} \subseteq \{x \le b\} \iff a \le b$.</p>

<p>Claim: $\displaystyle \bigcup_{a \in A} \{x \le a\} = \{x \le \sup
A\}$.</p>

<p><em>Proof</em>:</p>

<div class="myeqn">
\[
  \begin{aligned}
    & x \in \bigcup_{a \in A} \{x \le a\} \\
    \iff& x \le a \;\forall a \in A \\
    \iff& x \text{ is a lower bound of } A \\
    \iff& x \le \inf A
  \end{aligned}
\]
</div>

<p>The last step is due to the defintion of infimum (<em>greatest</em>
lower bound).</p>

<p>With the above claim, one has</p>

<div class="myeqn">
\[
  \begin{aligned}
    & \bigcap_{n=1}^{\infty} \bigcup_{k=n}^{\infty} \{x \le a_k\} \\
    =& \bigcap_{n=1}^{\infty} \bigcup_{a \in \{a_k:k \ge n\}} \{x \le a\} \\
    =& \bigcap_{n=1}^{\infty} \{ x \le \sup \{a_k:k \ge n\}\} \\
    =& \{x \le \inf\sup \{a_k:k \ge n\}\}
  \end{aligned}
\]
</div>

<p>Hence, one can see that $\sup\inf \{a_k:k \ge n\} \le \inf\sup
\{a_k:k \ge n\}$ and $\displaystyle \bigcup_{n=1}^{\infty}
\bigcap_{k=n}^{\infty} \{x \le a_k\} \subseteq \bigcap_{n=1}^{\infty}
\bigcup_{k=n}^{\infty} \{x \le a_k\}$ share something in common.</p>

<p>
<a href="//validator.w3.org/check?uri=referer"><img
  src="/images/valid-html401.png" alt="Valid HTML 4.01 Strict"
  height="31" width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>

Refer to commit 12d38c1. ↩
Using a local configuration file with the CDN in MathJax Documentation. ↩
Refer to MathJax in Octopress via HTTPS in Blog 1 for details. ↩
_config.yml at commit 71ff4fb. ↩

Blog 1

Random Talk on Random Thoughts