How to Use MathJax in WordPress for Beautiful Math Equations

MathJax is an open-source JavaScript display engine that enables rendering of embedded LaTeX, MathML, and AsciiMath in all modern browsers. If you want to write beautiful math equations in WordPress posts using MathJax, you need to install a MathJax-compatible plugin on your WordPress site. One such popular plugin is MathJax-LaTeX, but ensure to verify its compatibility with the latest WordPress version before installing.

To install MathJax-LaTeX, go to your WordPress dashboard, navigate to “Plugins > Add New,” search for “MathJax-LaTeX,” and click “Install Now.” Once installed, activate the plugin to start using MathJax on your site. MathJax’s JavaScript can be delivered from your own server, but using the Cloudflare Content Distribution Network (CDN) is preferred as it offers increased speed and stability.

How to Write LaTeX Code in WordPress

You can embed LaTeX code in your WordPress post using one of the following syntaxes:

1. [latex] ... [/latex]: Displays equations left-aligned (requires plugins like MathJax-LaTeX).
2. \( ... \): Displays equations left-aligned (inline).
3. $$ ... $$: Displays equations center-aligned (block).
4. \[ ... \]: Displays equations center-aligned (block).

If you are using the MathJax-LaTeX plugin and are not enclosing LaTeX code within “latex” (syntax 1), you need to include the “mathjax” shortcode anywhere in the post. This allows the plugin to add the necessary JavaScript to your post.

Writing One Equation

You can write a single equation using one of the syntaxes given above.

Example 1 :

[latex] \frac{2x - 3}{4} + \frac{3x + 1}{2} = \frac{5x - 1}{6} [/latex]

Rendered Output:

\( \frac{2x – 3}{4} + \frac{3x + 1}{2} = \frac{5x – 1}{6} \)

Example 2:

\( E = mc^2 \)

Rendered Output:

\( E = mc^2 \)

Example 3:

$$ \frac{1}{x} + \frac{1}{y} = \frac{1}{z} $$

Rendered Output:

$$ \frac{1}{x} + \frac{1}{y} = \frac{1}{z} $$

Example 4:

\[ \frac{1}{x-1} + \frac{1}{y-1} = \frac{1}{z-1} \]

Rendered Output:

\[ \frac{1}{x-1} + \frac{1}{y-1} = \frac{1}{z-1} \]
Adjusting Font Size

The font size of the rendered equation might be small. You can adjust it using the following commands within your LaTeX code:

  • Equation Style: \displaystyle ensures equations appear in display style (ideal for block equations).
  • Font Size: Commands like \tiny, \scriptsize, \footnotesize, \small, \normalsize, \large, \Large, \LARGE, \huge, \Huge adjust font size.

The rendered sizes of these commands are shown in the following figure.

Latex font sizes

Writing a System of Equations

You can use the cases environment to write a system of equations. Each equation is written inside the cases environment, separated by “\\”. Instead of using cases, you can utilize the following formats for systems of equations: aligned for alignment, bmatrix for bracketed systems, and gathered for ungrouped equations.

Example:

\(
\begin{cases}
\frac{x}{2} + \frac{y}{3} = 4 \\
\frac{x}{3} - \frac{y}{2} = 1
\end{cases}
\)

Rendered output:

\( \begin{cases} \frac{x}{2} + \frac{y}{3} = 4 \\ \frac{x}{3} – \frac{y}{2} = 1 \end{cases} \)

If you want to increase the font size of all equations, you can use one of the size commands before the cases environment.

Example:

\(
\large
\begin{cases}
\frac{x}{2} + \frac{y}{3} = 4 \\
\frac{x}{3} - \frac{y}{2} = 1
\end{cases}
\)

Rendered output:

\( \large \begin{cases} \frac{x}{2} + \frac{y}{3} = 4 \\ \frac{x}{3} – \frac{y}{2} = 1 \end{cases} \)

Let me know if these details are helpful and if you would like further refinements or a specific example!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.