Sunday, March 20, 2011

Using Mathjax CDN to Embed Equations (Formulas) in a Web Page

$$ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} $$

Summary

Using Mathjax Content Delivery Network (CDN) equations and formulas can be added to a webpage with a few simple steps. This solution eliminates the need to setup and maintain a server. It is freely available for low bandwidth users. For some work flows, a document can be created offline and uploaded with little or no modification. This article summaries how to setup a webpage for use with Mathjax. The article provides a few examples of use.

Discussion

If you want to include equations in a blog, there are a few basic approaches. The simplest is to create pictures of the equations and embed those pictures in the web page. If you use MS Word to create HTML pages, this is how it embeds equations. Most of the standard options in Lyx for exporting to HTML use the same technique.  Alternatively, you can use some approach to render the equations at display time. The Google Chart API works like this. An image is embedded in a web page and the URL for the image contains a definition of the equation to display. Elyxer is a tool which converts a document written in Lyx into an HTML document which uses MathJax, jsMath, Google Chart API, or plain HTML to display the equations. This article shows how to manually use MathJax with a webpage.

Step 1: Add the MathJax scripts to the webpage.

You accomplish the first step by putting something like

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

into the <head> block of your document. This statement can be place in other locations like the <body>, but the <head> block is preferred. Since MathJax can be customized in many ways, there are many different ways to link MathJax to the webpage. The sample above works, but other configurations are possible. See the getting started guide for a detailed description of some of the options.

Step 2: Write your equations inside escape character sequences.

To add an equation, an escape sequence is entered. There is one escape sequence for inline equations and another for equations which appear on a line by themselves. For example, using the scrip method above, the sequence

$$…$$
and
\[ …\]
indicates that an equation is to appear by itself. The sequence
\(…\)

indicate that an equation should appear inline.

Below is a sample HTML page which includes MathJax.

<html>
  <head>
    <script type="text/javascript" src="/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  </head>
  <body>
    <p> Acceleration, \(a\), is a function of force, \(F\), and mass, \(m\). The relationship is usually written as \[F=m\cdot a\].<\p> However, by manipulating the equation, acceleration can be solved for as shown in equation (1).</p>
    <table border="0" cellspacing="0" cellpadding="2" width="100%">
      <tbody><
        <tr>
        <td valign="top" width="10%"></td>
        <td valign="top" width="80%"><p align="center">$$a=\frac{f}{m}$$</p></td>
        <td valign="top" width="10%">(1)</td>
        </tr>
    </tbody>
    </table>
  </body>
</html>

 

This code will result in a display like shown below:


Acceleration, \(a\), is a function of force, \(F\), and mass, \(m\). The relationship is usually written as \[F=m\cdot a\]. However, by manipulating the equation, acceleration can be solved for as shown in equation (1).

 

$$a=\frac{f}{m}$$

(1)

 

Conclusion

Thanks to the MathJax team and their sponsors. This is a fantastic service that really simplifies the maintenance and upkeep required to add equations to almost anything.


References:

This work is licensed under a Creative Commons Attribution By license.

No comments:

Post a Comment