Comparison of three ways to add MathJax to WordPress

This article compares how to add MathJax, a program for writing mathematical expressions, to your web page on WordPress.

Specifically, we compare three ways 1) using plug-ins, 2) writing code in custom HTML blocks and 3) using action hooks, focusing on the following.

Is it difficult to install and set up?
Will the math formulas still be shown up after changing the WordPress theme?
Will it work sustainably against MathJax specification changes?
Are there any other potential future risks?

As of November 2022, the latest version of MathJax is 3.2.2.

Plug-ins

Installation and setup

Plug-ins are the easiest way to add MathJax to your web page.

At the time of writing the article (November 2022), the top two plugins by the number of valid installations are the following two.

MathJax-LaTeX (active installs 9,000+)
Simple MathJax (active installs 3,000+)

Of these, Simple MathJax has a field to add code for various settings (e.g., lazy typesetting) and is easy to set up, so this article describes Simple MathJax.

For how to install and configure each, please refer to another article.

How to use MathJax-LaTeX, a WordPress plug-in for math formulas

How to use Simple MathJax, a WordPress plug-in for math formulas

WordPress theme changes

Changing the WordPress theme does not affect the activation of the plugin and will not break the display of the math formulas.

However, if you change the theme, the code in the CSS will disappear, so you will need to rewrite the CSS. (This is the same for all methods.)

Also, if the theme is incompatible with the plugin, the plugin may not work.

MathJax specification changes

It is possible to rewrite the CDN (the web address accessed to use MathJax) on the Simple MathJax setting options, so it can be said to be compatible with specification changes.

📌NOTE
Simple MathJax loads the latest version of MathJax (version 3.22 as of Nov. 2022) by default, but you can specify version 2 or version 3.xx to load. Another post shows you how to do this.

However, it is difficult to evaluate whether the plugin can continue to be used when MathJax or WordPress undergoes major changes, as it depends on the plugin developer.

The sustainability of the plugin can only be judged in terms of how often it is updated and whether the developer answers questions in the forum.

Other future risks

There is a risk that the plug-ins will not be available in the future for some reason.

However, the MathJax notation is the same for both plugins and action hooks, so it should not be too much of a problem if you know how to migrate.

Custom HTML blocks

Installation and setup

You can implement MathJax by writing code in a custom HTML block somewhere in your article and pasting the code below.

MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
  },
  chtml: {
    matchFontHeight: false
  }
};
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

📌NOTE

The explanation of the code is as follows

The role of "" on lines 1 to 9 is to make it possible to use "$" and "\(" as delimiters when writing inline math (mathematical formulas in sentences). See official website for details.
Note that the default setting of "matchFontHeight" is "true," so if an inline math formula is written within a Japanese string, the formula will be slightly larger than the font, which means the formula will stick out above the line. When "false" is set, the formula height will be the same as the font height. See official website for details.
The role of on line 10 is to display the formula in Internet Explorer 11, which does not support MathJax version 3. See official official website for details.
Line 11 is the code to load the latest version of MathJax. See official website for details.
The code to load MathJax version 2 is shown below, and you can see that the code has changed significantly since MathJax changed its specifications to version 3.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML">
</script>

WordPress theme changes

Changing the theme does not affect the code written in the article, so the display will not be broken.

However, as mentioned above, the CSS needs to be rewritten.

MathJax specification changes

When MathJax changes the specifications, the code written in each article’s custom HTML block must be rewritten one by one.

However, you can rewrite the custom HTML blocks for all articles at once if you use the reusable blocks in advance, as described in the procedure below.

Register a custom HTML block with code to load MathJax as a reusable block.
Add the reusable block somewhere in the article where you wrote the math formula.
Do not convert the added reusable block to a regular block and save the article.
If the MathJax specification changes, rewrite the code in the reusable block.

However, there is concern about the having to use reusable blocks in case of future specification changes.

In the past, there was an incident where the reusable blocks disappeared when upgrading WordPress.

Other future risks

Since the code that should be placed in is placed in , there is a concern that this will cause problems in the future due to changes in WordPress specifications.

The official MathJax website also recommends writing in the head as follows.

It can also go in the \ if necessary, but the head is to be preferred.
https://docs.mathjax.org/en/latest/web/start.html#using-mathjax-from-a-content-delivery-network-cdn

Action hooks

Installation and setup

Introducing MathJax with action hooks is somewhat difficult for WordPress beginners because it requires creating a child theme and adding code to function.php.

📌NOTE
The action hook is a mechanism for inserting functions (or programs) provided by WordPress. In order to use the action hook, you need to write the code in the file "function.php" attached to the WordPress theme. A child theme is a theme created by a web administrator to add or change functions while protecting the functions of the original theme (parent theme.) For creating a child theme, you can find a simple and easy-to-understand explanation by searching the Web, so I will leave the explanation there.

📌NOTE

The action hook is a mechanism for inserting functions (or programs) provided by WordPress.
In order to use the action hook, you need to write the code in the file "function.php" attached to the WordPress theme.
A child theme is a theme created by a web administrator to add or change functions while protecting the functions of the original theme (parent theme.)
For creating a child theme, you can find a simple and easy-to-understand explanation by searching the Web, so I will leave the explanation there.

To implement MathJax specifically, create a child theme and copy and paste the following code into the child theme’s function.php.

function mathjax_add(){
	echo <<< EOM
	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
EOM;
}
add_action('wp_head', 'mathjax_add');

On the 8th line of the code, the program is added and executed by the action hook.

WordPress theme changes

If you change the theme, the function.php will also be changed and the formula will not be displayed.

This will require you to copy and paste the code into the function.php of the changed theme.

MathJax specification changes

Even if the MathJax specification changes, all you have to do is rewrite the code in function.php.

Other future risks

As far as I can tell, there are no specific future risks.

Summary and Conclusions

A summary is shown in the table below.

	Plug-ins	Custom HTML blocks	Action hooks
Installation and setup	Excellent	Good	Poor
Math formulas after changing the WordPress theme	Excellent	Excellent	Poor
Sustainability against MathJax specification changes	Excellent	Good	Good
Other future risks	Good	Good	Excellent
My opinion	Excellent	Good	Poor

I think “plugins” are the best way to install and configure MathJax.

The reason is that the plugin seems to be the easiest to adapt to future specification changes. Among them, Simple MathJax has no bugs, does not require shortcodes, and can implement lazy typesetting for speedup as introduced in another post.

The reason I don’t use custom HTML blocks for MathJax implementation is that I’m forced to use reusable blocks.

Using action hooks is considered to be the most robust method, but it proves more laborious work than plugins. However, it is a good option if you don’t want to use the plugin or if the plugin is no longer available.