Abstract #
Blogging is an activity that records our lives and thoughts, which is especially helpful when organizing one’s studies in a specific area. Blogging about math is particularly attractive because it allows us to present content more fluently and rigorously using TeX-related functionalities. However, implementing LaTeX in a browser can be cumbersome due to its large size. Instead, lightweight frameworks like KaTeX or MathJax are preferable. Here, we choose MathJax and demonstrate its use in our blog system.
This blog is based on my implementation using the following technical stack:
For more details on the implementation, refer to my other article: Essential Checklist for Building Your Personal Blog
Let’s begin our journey!
Installation #
Refer to Mathematics in Markdown, we can install MathJax into our Hugo blog site. Here’s a list of changes made:
./config/_default/markup.yaml: Add passthrough delimiters../layouts/partials/math.html: Include MathJax scripts../layouts/_default/baseof.html: Cachemath.html.
After making these changes, you can start using MathJax in your blog!
Tex code:
$$
\begin{aligned}
a + b = Hello, World!
\end{aligned}
$$
$$ \begin{aligned} a + b = Hello, World! \end{aligned} $$Rendered equation:
Frequent Syntax #
To write beautiful formulas, it’s important to know the basics of MathJax (TeX) syntax well. This includes understanding how to use different fonts and adjust indents among other features. Here, we’ll explore the frequent syntaxes of MathJax.
Fonts #
In TeX, there are two primary modes: text mode and math mode. For MathJax, content within specific delimiters is inherently in math mode. However, the same font commands can behave differently in these two modes, for instance1:
- In math mode, spaces are ignored with commands like
\mathbfand\mathit. - Combining
\mathbfand\mathitlike\mathbf{\mathit{...}}is not permissible. - Certain syntaxes are exclusively supported in math mode, such as:
\( \textit{text1^{text2}} \)results in an error.\( \mathit{text1^{text2}} \)is correctly processed.
Practically, it’s advisable to use math mode syntax for mathematical constants and variables, and text mode for regular text.
Here are some commonly used fonts in TeX and MathJax2:
- text mode:
\textbf{...}: \(\textbf{Boldface}\).\textit{...}: \(\mathit{Italic}\).\text{...}: \(\text{Roman}\).
- math mode:
\mathbf{...}: \(\mathbf{Boldface}\).\mathrm{...}: \(\mathrm{Roman}\).\mathit{...}: \(\mathit{Italic}\).\mathcal{...}: \(\mathcal{Caligraphic}\).\mathsf{...}: \(\mathsf{Sans-Serif}\).\mathbb{...}: \(\mathbb{Blackboard\ Bold}\).
Greek Letters #
| Name | Syntax | Rendered Result | Name | Syntax | Rendered Result |
|---|---|---|---|---|---|
| Alpha | \alpha |
\( \alpha, \Alpha \) | Nu | \nu |
\( \nu, \Nu \) |
| Beta | \beta |
\( \beta, \Beta \) | Xi | \xi |
\( \xi, \Xi \) |
| Gamma | \gamma |
\( \gamma, \Gamma \) | Omicron | o |
\( o, O \) |
| Delta | \delta |
\( \delta, \Delta \) | Pi | \pi |
\( \pi, \Pi \) |
| Epsilon | \epsilon |
\( \epsilon, \Epsilon \) | Rho | \rho |
\( \rho, \Rho \) |
| Zeta | \zeta |
\( \zeta, \Zeta \) | Sigma | \sigma |
\( \sigma, \Sigma \) |
| Eta | \eta |
\( \eta, \Eta \) | Tau | \tau |
\( \tau, \Tau \) |
| Theta | \theta |
\( \theta, \Theta \) | Upsilon | \upsilon |
\( \upsilon, \Upsilon \) |
| Iota | \iota |
\( \iota, \Iota \) | Phi | \phi |
\( \phi, \Phi \) |
| Kappa | \kappa |
\( \kappa, \Kappa \) | Chi | \chi |
\( \chi, \Chi \) |
| Lambda | \lambda |
\( \lambda, \Lambda \) | Psi | \psi |
\( \psi, \Psi \) |
| Mu | \mu |
\( \mu, \Mu \) | Omega | \omega |
\( \omega, \Omega \) |
Mathematical Symbols #
| Name | Syntax | Rendered Result | Name | Syntax | Rendered Result |
|---|---|---|---|---|---|
| Plus | + |
\( + \) | Less than | < |
\( < \) |
| Minus | - |
\( - \) | Less than or equal | \leq |
\( \leq \) |
| Multiply | \times |
\( \times \) | Greater than | > |
\( > \) |
| Divide | \div |
\( \div \) | Greater than or equal | \geq |
\( \geq \) |
| Equal | = |
\( = \) | Not equal | \neq |
\( \neq \) |
| Approximation | \approx |
\( \approx \) | Similar to | \sim |
\( \sim \) |
| Summation | \sum |
\( \sum \) | Integral | \int |
\( \int \) |
| Product | \prod |
\( \prod \) | Union | \cup |
\( \cup \) |
| Intersection | \cap |
\( \cap \) | Subset | \subset |
\( \subset \) |
| Superset | \supset |
\( \supset \) | Subset or equal | \subseteq |
\( \subseteq \) |
| Superset or equal | \supseteq |
\( \supseteq \) | Infinity | \infty |
\( \infty \) |
Mathematical Environments #
| Name | Syntax Begin | Syntax End | Rendered Result |
|---|---|---|---|
| Align equations | \begin{align} |
\end{align} |
\( \begin{align} a & = b + c \\ d & = e + f \end{align} \) |
| Aligned equations | \begin{aligned} |
\end{aligned} |
\( \begin{aligned} a & = b \\ c & = d \end{aligned} \) |
| Equation | \begin{equation} |
\end{equation} |
\( \begin{equation} E = mc^2 \end{equation} \) |
Macros #
To streamline operations, we have defined several macros. These macros are included in the file ./layouts/partials/math.html to facilitate easier processing.
<script>
MathJax = {
tex: {
packages: {'[+]': ['base', 'amsmath', 'amsthm']},
tags: 'ams',
displayMath: [['\\[', '\\]'], ['$$', '$$']], // block
inlineMath: [['\\(', '\\)']], // inline
macros: {
zdef: ['{\\textbf{DEFINITION #1}}', 1],
zthe: ['{\\textbf{THEOREM #1}}', 1],
zlmm: ['{\\textbf{LEMMA #1}}', 1],
zprf: ['{\\textbf{PROOF #1}}', 1],
aligned: ['\\begin{aligned}\\label{#1}#2\\end{aligned}', 2],
align: ['\\begin{align}\\label{#1}#2\\end{align}', 2],
zt: ['{\\text{#1}}', 1],
zi: ['{\\textit{#1}}', 1],
}
},
startup: {
ready: function () {
MathJax.startup.defaultReady();
}
}
};
</script>
Conclusion #
With the contents outlined above, you can now easily edit mathematical formulas in your blog!