Friday, August 29, 2008

Equations in Blogger (and other HTML) Made Easy

With a little help from this blog, I finally figured out how to create aesthetically pleasing equations in blogger or any HTML site without a big hassle. His site was a big help, but I still had to fumble around to get it working. Hopefully this post will clear up any questions.

The problem is that Firefox renders MathML in .xhtml, but Blogger publishes in .html so there's a compatibility issue. The solution is to input a Java script in the html that handles the equations for you. The script is thanks to this site. It is licensed under the GNU. You will need Firefox or IE with mathplayer.

Step 1: Get the script

Go to http://www1.chapman.edu/~jipsen/mathml/asciimathdownload/ for the original host OR go to http://students.utsi.edu/jbatters/scripts/asciimathml.js for one that renders the equations in black instead. If the second link opens the text version, just save the page as .js.

Step 2: Host the script

The script has to be hosted somewhere for it to work. I hosted it on my personal website (the link above) but it can be hosted anywhere. Google Sites should work. OR I don't mind if you just use my script that's already hosted.

Step 3: Call the script from Blogger. Add the html/java script box to your layout. Follow the arrows



Then add the code to your html/javascript box. Click the 'edit' button shown from the Layout edit screen. Paste the following in the box.

<script src="http://students.utsi.edu/jbatters/scripts/ASCIIMathML.js" type="text/javascript"></script>

That script points to my hosted file. If your hosting your own replace 'students.utsi.edu/jbatters/scripts' with your host location


Be sure to SAVE.

That's all the setup. Now it will work for ANY new post on that blog. For your own personal website you can point to the java script hosted elsewhere with the same command by pasting the script text between the 'head' tags at the top of your html file or you can use the following command with the java script saved in the same folder as your html file.

<head>

<script type="text/javascript" src="ASCIIMathML.js"></script>

<title>your title...</title>

</head>


Step 4: Entering equations in Blogger

See the example for a simple equation


The script recognizes the text between the accents (the button above the 'tab') as math. You can get some syntax from here. It recognizes many LaTeX commands. Example

`int_(0)^(1)(x^2+2x)dx`

Since this works with MathML it might work directly with Mathematica, Mathtype, etc. I'll write up instructions to export TeX from Mathtype. That should work if the MathML thing doesn't.

No comments: