WordPress and MathJax Integration Tutorial

MathJax is a cross-browser JavaScript library that displays mathematical equations in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache license.

This tutorial will teach you how to integrate MathJax in popular free and open source web platform, WordPress. There are several plugins you can use, but we choose two of them for demonstration – WP-MathJax and more popular MathJax-LaTeX

MathJax-LaTeX installation

Automatic installation

1) Go to Admin Panel > Plugins > Add New

2) Enter MathJax-LaTeX in the Search box and click the Search Plugins button

3) A list with plugins will be displayed. Click Install Now link beneath MathJax-LaTeX

4) The plugin will be installed and when the installation is finished click Active Plugin link

Manual installation

1) Unzip the downloaded .zip archive to the /wp-content/plugins/ directory

2) Activate the plugin through the ‘Plugins’ menu in WordPress

3) This uses the mathjax CDN(http://www.mathjax.org/docs/1.1/start.html#mathjax-cdn). Alternatively:

4) Download the MathJax Javascript library (http://www.mathjax.org /download/)

5) Place the Javascript library in the mathjax-latex directory (/wp-content/plugins/mathjax-latex/MathJax)

6) You can configure the plugin to load MathJax from a different URL to the default. See the options page.

WP-MathJax installation

MathJax allows you to include mathematics in your web pages, either using TeX and LaTeX notation, or as MathML, and you can even use both in the same document.

Automatic installation

1) Go to Admin Panel > Plugins > Add New

2) Enter WP-MathJax in the Search box and click the Search Plugins button

3) A list with plugins will be displayed. Click Install Now link beneath WP-MathJax

4) The plugin will be installed and when the installation is finished click Active Plugin link

Manual installation

1) Extract the plugin archive

2) Upload plugin files to your /wp-content/plugins/ directory

3) Activate the plugin through the ‘Plugins’ menu in WordPress

4) Configuration can be changed from WP MathJax menu from Settings

Configuration

1) After the plugin is installed and activated navigate to Admin panel > Settings > WP MathJax

2) WP MathJax Settings page will be displayed with a lot of syntax options as well as whether MathJax Javascript should be delayed at startup

wp-mathjax-configuration

Usage

After a plugin activation you are free to use LaTeX syntax surrounded by \( \backslash( … \backslash) \) marks. Examples:

Formula examples: \( \frac{a+1}{b+1} \)

The equation \(\pi=\sum\limits_{n=0}^{+\infty} \frac{{(n!)^2 2^{n+1}}}{(2n+1)!}\) defines \(\pi\)

Demo

We use MathJax on our site so you can check it on around the site, for example algebra formulas articles display the formulas with MathJax

Share This Post

Recent Articles

Leave a Reply