Please Make A Note: How to Post Math Equations in Blogger Using Latex

In a previous post, I discussed how to post math equations in blogger using the ASCIIMathML script. The advantage of using this method is that you are not dependent on any external server to host your equations since they are NOT images. ASCIIMathML displays equations in ASCII format, i.e. in plain text format.

The bottleneck of this method, as I discovered later on, is its limited capability to display some complicated mathematical forms. The famous example is the limit as x goes to zero. This is how it looks using ASCIIMathML

$\lim_{x\rightarrow 0}$

I was glad to find these limitations before engaging in posting topics related mathematics. It would have been a mess to go back and forth and convert equations etc...

The method that I will discuss today is an old technique that I passed upon when I first started this blog, but had completely neglected. It uses LaTeX to display equations. Of course, this is a good sign. But how does it work? Very simple.

There is a server somewhere over the internet that has "software like" capabilities, i.e. it can process user requests dynamically. These capabilities include Perl,PhP, ASP etc...

On this server, there would be an application that takes a LaTeX syntax as input, processes it on the server, and converts it to an image on the fly.

Voila!

But where is that server? Who wrote that application? Where are the images hosted? Will the application be there, forever?

One question at a time.

Where is that server?
There are several servers out there, the ones I know of are http://www.codecogs.com/ and http://www.forkosh.com/ (which uses mimeTEX).

Who wrote that application?
One, two, or more programmers.

The CodeCogs application was written by Will Bateman and Steve Mayer and can be accessed at:
http://www.codecogs.com/gif.latex?

The mimeTEX interpreter was written by John Forkosh and can be accessed at:
http://www.forkosh.dreamhost.com/mimetex.cgi?

Where are the images hosted?
On the server, temporarily. Due to the dynamic nature of the LaTeX interpreters, they are converted to an image whenever a webpage posts a request. For example, whenever you load a page that has an equation, the server immediately interprets that equation, converts it to an image and sends back that image. I assume that there would be a cached version of the image on the server that is deleted after some time.

Will the application be there forever?
I hope so! The only alternative is to host that application yourself, on your own server. But hey! Can you make sure that you will be able to pay for that hosting for the rest of your life? This dependence on an external server is no different than our depends on google. As for the equations, I am currently hosting them on Picasa, which is basically like hosting the equation on an external server. But, remember, all you need is the application that interprets LaTeX, not the images! So, in the event that one of these applications disappears, you can very simply point to another application on some other server. It is very simple as you will see shortly.

So how does it work in blogger?

You simply create an img tag and set the source of the image as the location of the application followed by the LaTeX syntax. Here's an example. Let's say you want to write this equation

$\large e^x = \sum\limits_{n = 0}^\infty {\frac{{x^n }} {{n!}}}$

The LaTeX syntax is

e^x = \sum\limits_{n = 0}^\infty {\frac{{x^n }}{{n!}}}

create an img tag with the appropriate src field pointing to the online LaTeX renderer and then insert the LaTeX code, i.e.

<img src="http://www.codecogs.com/gif.latex?e^x = \sum\limits_{n = 0}^\infty {\frac{{x^n }}{{n!}}}" />

Voila!

Of course, this is a mess! If everytime you want to write an equation you have to write down the img tags and insert the path to the LaTeX renderer... that is very inefficient!

Fortunately, there are several ways to overcome this. The first one, thanks to the guys at codecogs, their online LaTeX editor prepares the img block for you. All you have to do is

Go to the codecogs online LaTeX editor
Type in your equations LaTeX
Copy the HTML code that is generated at the bottom of the page
Paste it in Blogger (either in the "Edit HTML" or "Compose views).

Voila!

After the equation is displayed, you can align it the way you want using the options provided by the blogger editor. The images generated by the codecogs LaTeX editor are transparent with a black foreground. In case your blog has a dark background, they won't look nice at all. What you have to do in this case (which is what I am doing on this blog) is create a new class for images that has a white background. Here's what you need to do

Go to your blog's Layout
Click on "Edit HTML"
Place your class somewhere before ]]> </b:skin >
Define your new class as follows:
img.latexEquation {
background:white;
margin: 0px;
padding: 5px;
}
When you paste the HTML code from codecogs, specify which class is applied to the image as follows:
<img class="latexEquation" src="..."/>

Voila!

Now your equations will have a nice white background behind them.

Alternatively, you can use the mimetex editor which gives you the option to make an opaque background and reverse the colors for blogs with a dark background. Make sure you specify \opaque for an opaque background and \reverse for a white foreground. \reverse\opaque will set a black background and white foreground. Here's how it looks with the \reverse\opaque setting