How to type math notations using LaTex syntax in your WordPress

Method #1: Jetpack’s LaTex render plugin (not recommended)

If you have Jetpack by WordPress.com plugin installed and activated in your WordPress, the good news is Jetpack comes with a LaTex rendering function out of the box.

To use this function, first ensure that you have enabled it in Jetpack’s settings.

 
Now you can go to your blog post and insert the following code:

$latex i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right>$

 
Jetpack will render the code into an image on their server and embed it to your blog like below:

 
Notice that the above Math notations are actually rendered as an image.

While Jetpack’s solution above works, it does have some drawbacks:

• Since the notations are rendered into an image, it does not scale well with the container size. The math notations may appear too small or too blurry.
• Search engines may not be able to read the notations.

Considering the above drawbacks, we recommend another way to type math notations in your WordPress.

Method #2: MathJax library (recommended)

MathJax is a Javascript library that reads LaTex syntax and turns it into beautiful math notations.

Compare to the above method, MathJax has some advantages:

• MathJax can render math notations in several formats, including HTML, MathML, SVG
• Rendered notations can scale well with container size (thanks the above formats)
• Maybe more SEO friendly (though we’re not 100% sure)
• More accessibility compatible

For more information, we recommend you to visit MathJax official page.

Using MathJax, the above Jetpack’s example can be rewritten as following:

$$i\hbar \frac{\partial}{\partial t} \left| \Psi(t) \right> = H \left| \Psi(t) \right> $$

and here’s the result:
$$i\hbar \frac{\partial}{\partial t} \left| \Psi(t) \right> = H \left| \Psi(t) \right> $$

How to use

To use MathJax in your web page, simply include their javascript in the page’s html.

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'>

If you are using WordPress and want to include the above script, you can use Insert Headers and Footers plugin and paste the script in the plugin’s setting.

After the script is included, all the LaTex you type will turn into beautiful math notations effortlessly.

Examples

Example #1

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

will output:
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Notice that using \( ... \) results in inline LaTex block, while using $$ ... $$ results in LaTex block in a separate line.

Example #2

\[
\left\{
\begin{split}
    & \boldsymbol{\nabla} \cdot \boldsymbol{E} = \frac{\rho}{\varepsilon_0} \\
    & \boldsymbol{\nabla} \cdot \boldsymbol{B} = 0 \\
    & \boldsymbol{\nabla} \times \boldsymbol{E} = - \frac{\partial \boldsymbol{B}}{\partial t} \\
    & \boldsymbol{\nabla} \times \boldsymbol{B} = \mu_0 \boldsymbol{J} + \varepsilon_0 \mu_0 \frac{\partial \boldsymbol{E}}{\partial t}
\end{split}
\right.
\]

will output:
\[
\left\{
\begin{split}
& \boldsymbol{\nabla} \cdot \boldsymbol{E} = \frac{\rho}{\varepsilon_0} \\
& \boldsymbol{\nabla} \cdot \boldsymbol{B} = 0 \\
& \boldsymbol{\nabla} \times \boldsymbol{E} = – \frac{\partial \boldsymbol{B}}{\partial t} \\
& \boldsymbol{\nabla} \times \boldsymbol{B} = \mu_0 \boldsymbol{J} + \varepsilon_0 \mu_0 \frac{\partial \boldsymbol{E}}{\partial t}
\end{split}
\right.
\]

Bonus

By this time, you may have already wondered, what if you want to show the plain original LaTex code instead of the converted math notations, like the LaTex codes pasted in the above examples?
The answer is simpler than expected: just put the LaTex code nested inside a <pre> </pre> tag. MathJax is smart enough to skip anything that is nested inside <pre> </pre>.

Now, if you want that original LaTex codes beautifully highlighted, you may want to check Google’s code-prettify library. But that’s another story :D.