November 25, 2011

Blogging Mathematics

I just wanted to see if I could get some simple mathematics into this blog. Not so much for my own needs, but because my brother (who is a far better mathematician than I am, but rather less adventurous when it comes to using computers) has been wanting to do so for a while, but hasn't been able to find a suitable system.

If you want to write about mathematics you need some way to describe the formulae, as the “mathematical keyboard” does not yet appear to have been invented. The most commonly-used mathematical typesetting system is probably Donald Knuth's TEX, which provides a very versatile language for describing mathematical expressions in relatively plain text. I started my search on the assumption that there has to be some way of integrating TEX with the popular Blogger platform that I and many others use. There are other languages for describing mathematics, including a markup (HTML-like) language called MathML, and this solution can be adapted (by reading applications documentation) to handle some others.

Ideally the author should just be able to type TEX-style input and have wonderful formulae appear automatically. In other words when you want to talk about the probability of getting \(k\) heads when flipping \(n\) coins you should be able to write

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

and have it appear as

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

(EDIT: Formula corrected Nov 25, 2011)
Note that the \(k\) and \(n\) in the paragraph above the formula, as well as those in this one, are properly represented in mathematical notation, and therefore identifiable as mathematical symbols, because they are so flagged in the body of the text—you can write simple or complex formulae inline as well as in separate expressions like the one above. I achieved this result using the MathJax system, which uses Javascript to render complex mathematics in the browser. The really nice part is that there's nothing to install, because MathJax is downloaded by the reader's browser. I'd welcome similar instructions for other blogging platforms in the comments if readers want to help users of those other platforms.

I realize that these instructions are detailed and therefore somewhat tedious, but I wanted them to be as useful and as simple as possible. Unfortunately the authors of MathJax make a very common mistake of software authors - they assume that their readers know enough to already understand how MathJax is used on the web. The people who really need to know this stuff are working mathematicians, scientists and engineers. While they are often as smart as all get-up they mostly don't have the time to develop great insight into web technologies, and I am hoping this proves they don't need to.

As usual, however, the assumption is that users will be happy to pick up whatever skills they need to get the job done. The MathJax site has examples in it, but nothing that really shows you exactly how to get that mathematics into your pages. I hope to provide those missing steps here. Please note, however, that I know very little about TEX, and cannot help you to find representations for specific formulae. As a working computer scientist I often have to learn enough about a “foreign” system to be able to demonstrate a concept. This blog post is intended to provide no more than a simple proof-of-concept, and I will not be responsible for any limitations of or problems with MathJax, Blogger or these instructions.

The first thing to do is to make sure your post includes a couple of pieces of information. You have to insert configuration data for MathJax (there are various options you can explore once you understand its principles). You must also include a request to load the actual code of MathJax, which is conveniently stored at multiple locations on the internet under a single name—a “content delivery network” determines your closest location and sends the code from there.

There are two different ways to inject this code. The simpler way, which I have used for this post and describe here, inserts these instructions in each individual post. If you want mathematics in every post then you should consider moving the configuration data and code request into your blog template, so you do not need to repeat the insertion for each post. This more advanced method is beyond the scope of this article, but I mention it for those bloggers who know enough to be able to use it.

So, create a new post for your blog, and then switch to the HTML input mode. Copy the text from the area immediately below and paste it in at the start of your HTML input window:



(You might want to follow the final ">" with an x that you use to set the cursor after the code, which should begin the post). Then go back into standard compose mode and, as an example, enter the following text:


A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}  \]



Hopefully, if all has gone well, you can now see this when you preview your blog page:

A Cross Product Formula

\[\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0
\end{vmatrix}  \]

As I believe I mentioned, this is largely a proof-of-concept post. I can't imagine why the MathJax guys haven't published this already. It's possible they already have an application note about about this, but if not then they are free to link to this article to help their users (hello, MathJax users).

So there you have it. This could make it much easier to talk about mathematics on the web. Please let me know if anything isn't clear, and I will try to correct it until it is. Otherwise, just have fun blogging mathematics!

30 comments:

david said...

great intro Steve. it would be good if my own pathetic incompetence has led to something that may be of help to other poor souls who feel that HTML magic formulae are a step beyond their neuronal capability. i'll have a go, and report back on progress. this has been a block for some months now, so i'm feeling quite excited about being able to insert formulae into my blogger posts. btw, as a subeditor, you might like to amend yr 1st formula to {n \ choose k}so the sticklers don't start grinding pedantic axes. thanks once again for standing up for the tyros. i think computer buffs do overestimate the computing sophistication of the user base, tho obviously, as we are bordering on aspergers terrain, i'm sure there are some mathematicians who are also very competent coders. but obvously the two skills need not, and often do not, overlap. thanks again for the time you have spent on this. i will try my best to make sure it was not wasted. love from bro.

Steve said...

There will be imitations: for example, discussions will only get the advantage of the MathJax package when they are shown in-line in the blogs, not in the separate “Leave your comment” window. There will be ways around these problems, and eventually a blogging platform will emerge that accommodates these needs more fully.

The disadvantages can only be appreciated after usage, however, so I have tried to avoid what we software guys sometimes call “big up-front design”, and leave the discovery and solution of the problems to those who use it. It's a start.

Good luck with your first adventures in mathematical publishing. Love, bro.

Iwan darmadi said...

hmmff, I finally get what I want.
Thank you Steve. It's awesome.
I never found another satisfied latex 'engine' for blogger before this.
:D

Forrest Bao said...

This does not work for me. But this one works for me: http://irrep.blogspot.com/2011/07/mathjax-in-blogger-ii.html

Nikita Evseev said...

I liked it! Now I type formulas in my blog.

Anonymous said...

Is there a similar way to use MathJax with wordpress.com? I know there is a plugin for wordpress.org ( if you are hosting your own site).

Steve said...

Well I'm not a WordPress user. But a Google search for "wordpress mathjax" gives Installing MathJax in WordPress as a first hit, so I guess it must be possible. Bear in mind though that the note begins by pointing out there is a plug-in for MathJax, so you might prefer to look at that option.

Anonymous said...

why it doesn't work
\sin x

msrosyidi said...

Excuse me,
Let me try if it works in comment area:
\begin{align}
\sin^{2}\alpha+\cos^{2}\alpha=1
\end{align}

Steve said...

Apparently!

ARPIT said...


\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

Steve said...

@ARPIT: I published your comment because I assumed you wanted to test whether it gave you the formula you expected. Looking at the comment window I imagine you must have been disappointed (for other readers, the source code only shows up, because Mathjax isn't loaded in the comment window).

However, as you can see looking at the comments as a part of the blog, it renders beautifully - well done!

james said...

hi i have a hard questin please help,q:You are playing a dice game with your friend by rolling two standard dice and recording the sum of two numbers. You will win when two consecutive outcomes are 7. Your friend will win when three consecutive outcomes are in increasing order. You will continue rolling until one of you will win. What is the probability that you will win?

Examples:If the outcomes are 10,4,6,6,7,7 you will win. If the outcomes are 7,3,7,9 your friend will win.

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

GRP said...

As a matter of curiosity, I'm using MathJax with a 'Classic' Blogger template.

Steve said...

Gavin (GRP): Thanks for your note. This isn't a competition, so I am always happy to hear about other ways people can achieve the ends they want. If anyone else has tips feel free to drop them here.

I'll be writing about the IPython Notebook soon, which allows you to blog not only Mathjax-based mathematics but also code in various different programming languages. The really good news is that you can, if the author makes it available, actually run the executable version of the same notebooks on your own machine, tweaking the code for your own purposes.

Matthew Martin said...

MathJax seems to be the most powerful way to put math on the web, but there are many limitations. For one thing, MathJax is incredibly slow. In general, javascript shouldn't be used for the appearance layer of a webpage because it is slow, single-thread, and degrades extremely ungracefully compared to HTML and CSS. But even among javascript-based rendering engines for math on the web, MathJax is roughly 5 times slower than alternatives like jqMath, though it is admittedly much more versatile.

Additionally, I want to point out that if you embed this code in a particular blog post, it will still apply to all the code that appears on the page, including other blog posts that you may not have wanted to put math in. For that reason, I recommend changing the code to use a more unique identifier than the dollar sign, so that you can freely use dollar signs in other posts.

Anonymous said...

\begin{align}
\sin^{2}\alpha+\cos^{2}\alpha=1
\end{align}

Unknown said...

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

Anonymous said...

I just want to test it works

\[sin^2(x)+cos^2(x)=1\]

Steve said...

Apparently it (still) does!

Anonymous said...

2015 test:

\[P(E) = {n \choose k} p^k (1-p)^{n-k}\]

Steve said...

Nice to know the solution is still good over three years on

Chris A. said...

Great post. I can now use equations on my blog.

Ananthakrishna said...

nice one !Thanks

Shel Hammer said...

$$ f(x) $$
\[f(x)\]

hjyanghj said...

just a test.

\( ax^2+bx+c=0 \)

hjyanghj said...

just a test.

\( ax^2+bx+c=0 \)

Addison said...

Hey Steve, great post! I used $\TeX$ in school, and have been thinking of sharing stuff from my random studying on the web, and I came across your blog. Thank you!