Mathjax on Github Pages

Mathjax enables LaTex syntax to write math equations and show on Github Pages.

Current (i.e., year 2023) version is V3.0. See official documents here.

The configuration, loading, and startup processes for MathJax version 3 are different from those of version 2 in a number of ways.

Where version 2 had several different methods for configuring MathJax, version 3 streamlines the process and has only one, as described below. In version 2, you always loaded MathJax.js, and added a config=... parameter to provide a combined configuration file, but in version 3 you load one of several different files, depending on your needs (so you can avoid multiple file transfers, and also use MathJax synchronously, which was not possible in version 2).

Version 3

Add the following codes to the end of the file _layouts/base.html. This loads MathJax automatically for all posts.

<!-- inline config -->
<script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      macros: {
      	RR: "{\\bf R}",
      	bold: ["{\\bf #1}", 1],
        indep: "{\\perp \\!\\!\\! \\perp}",
    	}
    },
    svg: {
    fontCache: 'global'
  	},
  };
</script>

<!-- load MathJax -->
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

The first script defines a global object named MathJax that contains configuration data for the various components of MathJax.

The MathJax has to be put before the script that loads MathJax itself.

The MathJax object defined above means:

tex
- inlineMath allows you to use single dollar signs ($) as in-line math delimiters, in addition to the usual $...$.
- macros allows you to define your own commands.
  
  macro is given as a name: value pair, where the name is the name of the control sequence (without the backslash) that you are defining, and value is either the replacement string for the macro (when there are no arguments) or an array consisting of the replacement string followed by the number of arguments for the macro and, optionally, default values for optional arguments.
  
  Note that the replacement string is given as a javascript string literal, and the backslash has special meaning in javascript strings. So to get an actual backslash in the string you must double it, as in the examples above.
  
  Just include your macro definitions in the macros section of the tex blocks of your configuration. The code above would define
  - \RR to produce a bold-faced “R”, and
  - \bold{...} to put its argument into bold face,
  - \indep ($\indep$) to show double perpendicular sign to represent independence,
svg to use a global font cache for all expressions on the page.
- svg is a Scalable Vector Graphics; it is scalable, high quality at any resolution.
- Other benifts of using svg: It won’t get pixelated at different screen sizes, like a raster image would.

Color eqns

Must enclose the part you want to color in braces {...}, otherwise everything behind the \color will be colored.

{\color{red} x} + {\color{blue} y}

The code show a formula as follows

\[{\color{red} x} + {\color{blue} y}.\]

Curly braces $\\{Z_t\\}$ have to use double backslashes. First escape the backslash from Jekyll, then mathjax.

QED at the End of Equations

Use margin-top:-2em; float:right to set the alignment to float to the right and move upward so that it is in the same line as the equation block.

$$
\begin{aligned}
f(x) &\approx f(0) + f'(0)(x-0) \\
&= \ln(1) + 1\cdot x  \\
&= x.
\end{aligned}
$$
<span style='margin-top:-2em; float:right'>$\square$</span>

If the equation is long, don’t need to float to the right. The $\square$ will append to the end of the equation. You can add \quad to add whitespaces if needed.

\begin{aligned}[b] option [b] is needed as we need it to align at the bottom.

$$
\begin{aligned}[b]
P(r_t>0) &= P(\mu+e_t>0) \\
&= P(e_t>-\mu) \quad\quad\quad (\sigma>0, \text{dividing by a pos. number, inequality unchanged}) \\
&= P\left( \frac{e_t}{\sigma} > -\frac{\mu}{\sigma}\right) \quad\;\; e_t\sim N(0, \sigma^2), \text{ then } \frac{e_t}{\sigma}\sim N(0,1) \\
&= P \left( \frac{e_t}{\sigma} < \frac{\mu}{\sigma} \right) \\
&= \Phi \left(\frac{\mu}{\sigma} \right) 
\end{aligned}  
\square
$$

References: