# Making Maths Look Good On A Blog

I set this blog up a little while ago, but have taken ages with getting going and actually writing articles. Why? Well a big factor was that I wanted to have a blog that contained maths – but I just couldn’t find any easy way of embedding maths in my blog that both looked good and was flexible enough to do all the sorts of complicated ‘maths stuff’ that I wanted to do. That was until I found MathJax – a JavaScript display engine for embedding hight quality maths in a web post. It has all the ease of LaTeX syntax, but without any of the hassle of uploading images or irritating little quirks that make you wonder why you bothered …

Many people make use of LaTeX to generate small images of the maths that they want, before uploading it to their website/wordpress account and then embedding it in their post. Not only is this a pain the arse for posts with many maths sections, but it is also completely unworkable for embedding maths within a sentance. Further, you can’t scale the maths in the same way as you do text, leaving a post to look kinda messy.

For example:

The Klein-Gordon Equation in relativistic quantum mechanics is as follows:

As an example of an in-sentence pice of maths, here’s one I made earlier:

These images look very much OK – the KG equation is a little blurry whilst the inline equation doesn’t really fit in with the text. And the images were somewhat of a hassle to generate whilst writing and article – I’d rather do everything in one hit.

Enter MathJax. MathJax allows you to write raw LateX into your favourite website editor in a way that will be rendered client-side (i.e. not using your server and pushing up your bandwidth by transmitting images). Simply add a small snippit of code to the page header just before the <\head> tag (for this WordPress blog I put it into the header.php file – take a look at the page source):

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

And then you’re away – it’s that easy! In order to render maths in a central image setting, embedd your TeX between ‘\ [' and '\ ]‘. For inline, use ‘\ (‘ and ‘\ )’.

For example:

$\frac {1}{c^2} \frac{\partial^2}{\partial t^2} \psi - \nabla^2 \psi + \frac {m^2 c^2}{\hbar^2} \psi = 0.$

Renders the Klein-Gordon Equation:

$\frac {1}{c^2} \frac{\partial^2}{\partial t^2} \psi - \nabla^2 \psi + \frac {m^2 c^2}{\hbar^2} \psi = 0.$

And as an example of the inline maths: $$\log(\frac{i}{j})=\log(i)-\log(k)$$

Can be obtained using:

$$\log(\frac{i}{j})=\log(i)-\log(j)$$

Notice that if you right click on the MathJax code, you can easily extract out the raw LateX, as well as setting a custom zoom setting etc. Another pro-tip is that if you’re writing a post and see a handy equation on Wikipedia, the raw LaTeX is often in the page source, which should save you typing it out yourself.

Note also that you can set up MathJax to output MathML if you so desire –  see their excellent documentation for more details.

I’ll leave you with a few nice looking equations:

$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}}{1+\frac{e^{-6\pi}}{1+\frac{e^{-8\pi}} {1+\ldots} } } }$

$F \ = \ - \ k_B T \ \ln Z$

$E_{m} = \frac{RT}{F} \ln{ \left( \frac{ \sum_{i}^{N} P_{M^{+}_{i}}[M^{+}_{i}]_\mathrm{out} + \sum_{j}^{M} P_{A^{-}_{j}}[A^{-}_{j}]_\mathrm{in}}{ \sum_{i}^{N} P_{M^{+}_{i}}[M^{+}_{i}]_\mathrm{in} + \sum_{j}^{M} P_{A^{-}_{j}}[A^{-}_{j}]_\mathrm{out}} \right) }$

### 4 Responses

1. Matt Oates says:

It’s LaTeX not LateX… just sayin.

2. Simeon says:

I love the way you render the maths on your site. I am presently using Drupal on my site and also use mathtype (equation editor) to generate images and web pages. I want sometime different, a website where my visitors can ask and input mathematical questions without latex.