How to Write Math Equation in Your Blog Post?

Write Math Equation Using Blogspot Blogger

You will not get all typing tools like Microsoft Word. In Microsoft Word, there are math equation tools that we can use easily to compose math equations or scientific equations. But Blogspot still has not incorporated all these tools to compose your math blog post.

But, we can't stop here. We have to write some equations in our blog post. We can do these in different alternate ways. We can insert some symbol or mathematical symbol from Blogspot Blog, look at the above figure.

The problem is writing an equation. But, if we know composing a little HTML code then we can write some simple equations in Blogger too. Say, H₂O, P=X^y, etc., but how?

First write as H2O, P=XY

If you look at HTML code then you will see these as-

<br />

First write as H2O, P=XY<br />

<br />

Now edid the HTML code as

H₂O, P=X^y

You will get the correct equation as H₂O, P=X^y

Compose Math Equation for Blog Post Using Latex

You may write 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}$

You may find these limitations before engaging in posting topics related to 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 mimetic 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 dependence on google. As for the equations, I am currently hosting them on Picasa, which is basically like hosting the Bon 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 a 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

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 every time 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 codecs, their online LaTeX editor prepares the img block for you. All you have to do is

1. Go to the codecogs online LaTeX editor
2. Type in your equations LaTeX
3. Copy the HTML code that is generated at the bottom of the page
4. 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 codecs LaTeX editor are transparent with a black foreground. In case your blog has a dark background, it 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

1. Go to your blog's Layout
2. Click on "Edit HTML"
3. Place your class somewhere before ]]> </b:skin >
4. Define your new class as follows:
   img.latexEquation {
   background:white;
   margin: 0px;
   padding: 5px;
   }
5. 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 and with the \reverse only.