Thursday, June 16, 2011

MathJax: the gory details

In this blog post I will outline the steps needed to display LaTeX on blogger via MathJax.

In this post I announced the use of a new LaTeX rendering engine that I started to use. A comment asked for more information how I achieved this. Unfortunately it took me a while before I noticed the comment. In this blog post I will provide the steps I performed to start using MathJax in blogger.

Step 1: Hosting
This is by far the hardest step in the configuration of MathJax. MathJax relies on a server which provides all the resources MathJax needs. So you need a host which you can control. I looked around for a hosting service and picked a local hosting service.

Step 2: Installing MathJax
There are various ways of installing MathJax depending on your host. For various reason I opted for a local installation.
Get a copy of the latest MathJax distribution of the download page of MathJax. Place the distribution on the host and follow the installation instructions. Other options are described as well.

Step 3: Add reference to your MathJax in blogger
In order to use MathJax in blogger you have to refer to the MathJax installation. Go to the design section of blogger and edit the html. In the head section of the html add the following section of code.

<html>
  <head>
     ...
     <script src='http://[yourhost/your-installation/]MathJax.js' type='text/javascript'/>
     ...
  </head>
  <body>
    ...
  </body>
</html>

Step 4: Start using LaTeX
Now you can use LaTeX in blogger.
\[
e^{i\pi} + 1 = 0
\]

Above I outlined the steps I performed to start using MathJax in blogger. Since the time that I started using MathJax some things changed. For example, It is now possible to use MathJax directly from their Content Distribution Network (CDN). In effect making steps 1 and 2 unnecessary.

Before you can use the CDN you will have to read the terms of service. After that use the alternate step 3 to reference Mathjax in blogger as outlined below and on the documentation page.

Step 3': Add reference to the CDN Mathjax in blogger
Go to the design section of blogger and edit the html. In the head section of the html add the following section of code.

<html>
  <head>
     ...
     <script src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML' type='text/javascript'/>
     ...
  </head>
  <body>
    ...
  </body>
</html>

This wraps up the explanation of the use of MathJax in Blogger.

2 comments:

  1. I myself switched to using the CDN of MathJax and it works like a charm.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete