Making Maths Look Good On A Blog

typesetting

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. 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.
    What is best opinion of how i should go about this.
    I think you should add capthacha to your site to prevent abuse. I have experienced that alot on my site

    • Adam says:

      Well, mathtype looks like it does a good job of capturing user input, without requiring them to know LaTeX. I’m guessing your issue is that you’d like to embed it in a website somewhere and that’s against the license conditions …

      If you want an opensource solution, it will likely use LaTeX or MathML, which you said that you didn’t want. Hmm. There’s an online LaTeX equation editor (http://www.codecogs.com/latex/eqneditor.php?lang=en-en) that would fir the bill nicely – dropdown boxes, a GUI interface etc. It also might be possible to roll out OpenOffice Math into a webpage.

      Let me know how you get on. Good luck!

  2. simeon says:

    i think i found a solution. fmath (www.fmath.info) a free math equation editor plugin for drupal. i am yet to give it a try. by God’s grace next month, when i will be trying to redesigning mathsvillage. i will try implementing the plugin with ckeditor on my site.

Leave a Reply

*