Using MathJax to render math

Some time ago I’ve heard about MathJax and decided to integrate it to my blog. Short time later everything was forgotten, but a few days ago I read an article and remembered my plan. So here it is ;-)

Up to now a mathematical formula was converted to an image like this:

There are some disadvantages, for example you can’t align a number of lines by the equal sign. And also the integration into continuous text is terrible, as you can see in the following sum: .
Different images have different baselines: vs . This will destroy any line spacings and it depends on the browser what you see if you zoom into the website.

Here is the same Text rendered with MathJax (you need to have JavaScript enabled so see a difference)

There are some disadvantages, for example you can’t align a number of lines by the equal sign. And also the integration into continuous text is terrible, as you can see in the following sum: \(\sum i = 5\). Different images have different baselines: \(i=\circ\) vs \(p=\circ\). This will destroy any line spacings and it depends on the browser what you see if you zoom into the website.

So you see, MathJax remedies these issues. Simple latex code is rendered into web compatible math symbols. That is done via JavaScript, so your browser has some more to do, but I think in times of Web2.0 it’s negligible. And it’s also mark-able, so you can copy & paste! But what if a visitor is browsing w/o JS? I implemented my version with a fallback to these images. So if you disable JS you’ll see pure output of WP-LaTeX.

I’m actually very busy, so there is no time to create and maintain an official WP-Plugin, but I can offer a How to, so you can handiwork.

How to?

This instruction is for WP-LaTeX version 1.7. Add a comment if you want an update for a newer version.

First of all you have to download MathJax, you’ll get it here. I installed a copy into WP_PATH/wp-content/plugins/ . Now log into you admin panel and install the plugin WP-LaTeX.

If this is done, cd to your plugin directory. The only file you have to edit is wp-latex/wp-latex.php . Since we won’t destroy the original functionality, we will continue creating images. So no need to delete anything. But if JS is enabled, the images should be replaced by MathJax-code. How do we find out whether JS is available!? We take JS to replace the images. So if it’s not enabled, the images won’t be replaced ;-)

Since the MathJax library contains very much JS, we will only load the MathJax-stuff if we need it. Most of the article don’t require latex, it’s a waste of resources if we load the library nevertheless. We introduce a new variable loadMathJax , indicating whether we need MathJax. Have a look at the code and search for function wp_head() { . This function still contains some style stuff, we only need to append some JS code:

function wp_head() {
	if ( !$this->options['css'] )
		return;
	?>
	<style type="text/css">
	/* <![CDATA[ */
	<?php echo $this->options['css']; ?>

	/* ]]> */
	</style>
	// -> our code start
	<script type="text/javascript">
	var loadMathJax = false;
	</script>
	// -> our code end
	<?php

loadMathJax is false by default, we don’t always need MathJax libs. That was nothing exciting, here comes the intelligence. You’ll also find a function called shortcode . This function is responsible for image creation, here is the code that is send to your browser:

$latex_object = $this->latex( $latex, $atts['background'], $atts['color'], $atts['size'] );

$url = clean_url( $latex_object->url );
$alt = attribute_escape( is_wp_error($latex_object->error) ? $latex_object->error->get_error_message() . ": $latex_object->latex" : $latex_object->latex );

return "<img src='$url' alt='$alt' title='$alt' class='latex' />";

Nice, isn’t it!? We now need to add some piece of code to replace this image with MathJax source code. We change the code to append a small JS:

$latex_object = $this->latex( str_replace("&", "", $latex), $atts['background'], $atts['color'], $atts['size'] );

$url = clean_url( $latex_object->url );
$alt = attribute_escape( is_wp_error($latex_object->error) ? $latex_object->error->get_error_message() . ": $latex_object->latex" : $latex_object->latex );

$id = "latex".md5($url.microtime ());
$start = "\$";
$end = "\$";
if ($latex[strlen($latex)-1] == ",")
{
	$start = "\\\\begin{align}";
	$end = "\\\\end{align}";
}
$mathjaxcode = "<script type='text/javascript'>
if (document.createElement && document.getElementById){
	loadMathJax = true;
	var img = document.getElementById('" . $id . "');
	if (img){
		var tex = document.createTextNode(\"" . $start . str_replace("\\", "\\\\", $latex) . $end . "\");
		img.parentNode.replaceChild(tex, img)
	}
};
</script>";

return "<img src='$url' alt='$alt' title='$alt' class='latex' id='" . $id . "'/>".$mathjaxcode;

Ok, let me shortly explain this. First we have to replace all & in the latex code that is parsed to an image (line 1). There is a small issue with this WP-LaTeX plugin. You can’t align multiple lines, & isn’t allowed. To nevertheless create multiline MathJax formulas this workaround is my resort. In line 6 I create a random id, so we can call this specific element by just naming it’s id. I additionally defined a tailing , as indicator for multiple lines. You just have to add e.g. \, (a small space) to the end of the last line, and this code expects multiple lines. It will be centered in the line and all & are aligned. After wards the piece of JS follows. You don’t have to understand it, it just looks for an image with the specified id and replaces it with LaTeX-code. It additionally sets the variable loadMathJax to true . Once an image is replaced this variable gets true! If no image will be replaced it will always stay false.

Last but not least the browser has to load the libraries. Since we want to know whether there is LaTeX-code in this side we can’t load it early in the header section. We have to evaluate loadMathJax in the footer section. Add the following to the init () function:

add_action( 'wp_footer', array( &$this, 'wp_footer' ) );

And append a new function to the end of the class:

function wp_footer ()
{
	?>
	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
		showProcessingMessages: false,
			messageStyle: "none",
			extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
			jax: ["input/TeX", "output/HTML-CSS"],
				tex2jax: {
					inlineMath: [ ['$','$'], ["\\(","\\)"] ],
					displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
					multiLine: true
				},
			"HTML-CSS": { availableFonts: ["TeX"] }
	});
	</script>
	<script type="text/javascript">
	if (loadMathJax)
	{
		var head= document.getElementsByTagName('head')[0];
		var script= document.createElement('script');
		script.type= 'text/javascript';
		script.src="/wp-content/plugins/MathJax/MathJax.js";
		head.appendChild(script);
	}
	</script>

	<?php
}

The first script section adds the MathJax configuration to the page. Take a look at the documentation to learn more. The second script appends a new DOM node to the head section via JS. If and only if loadMathJax is true and JS is available. If you installed MathJax to a directory different to WP_PATH/wp-content/plugins/ you have to edit the script.src line.

This should work, at least for me ;-) Right-click to these mathematical formulas and choose Settings -> Zoom Trigger -> Click, and each time you click on a formula you’ll see a zoomed version. Very smart I think!

Btw. even if it sounds like I’m arguing about this image variant, I’m not! It’s a very good method and the displayed formula is the same in every browser. Even Wikipedia uses this technique.

Here is a nice last example, based on the sample of WP-LaTeX:

Here is the code for the above formula:

\displaystyle P_\nu^{-\mu}(z)&=\frac{\left(z^2-1\right)^{\frac{\mu}{2}}}{2^\mu \sqrt{\pi}\Gamma\left(\mu+\frac{1}{2}\right)}\int_{-1}^1\frac{\left(1-t^2\right)^{\mu -\frac{1}{2}}}{\left(z+t\sqrt{z^2-1}\right)^{\mu-\nu}}dt\\&=a^2+\pi\cdot x_\infty\\&\approx42\,

Go out, produce smart looking, intelligent web pages! Looking forward to read some scientific articles at your websites!