There are many different options for displaying equations on your webpage or blog. The main strategies are as follows:
- Link to static PNG, GIF, or JPEG images stored on your server. Generate such images using something like codecogs. The problem with this is you have to do a lot of work manually.
- Use a direct link to a remotely generated image, via codecogs. This is a great idea, unless you’re like me and don’t like to rely on outside servers to render things.
- Use MathML on an XML or XHTML page. For instance, the equation $$ \sum_{k=1}^7 x^k $$ would be written as:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd"> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>k</mi> <mo>=</mo> <mn>1</mn> </mrow> <mn>7</mn> </munderover> <msup> <mi>x</mi> <mi>k</mi> </msup> </mrow> </math>
code generated by: Wolfram Research
Am I alone in thinking thinking that this is an insane amount of clutter to have in your source code? The good news is you don’t have to type it out by hand. Various LaTeX to MathML converters exist either online (MathMLcentral) or through a WYSIWYG equation editor such as TeXmacs or MathMagic.
- The best option I’ve come across so far is a tool called MathJax. It is a Javascript library that creates “beautiful math in all browsers.” There are two ways to use MathJax:
- Use the MathJax Content Delivery Network (CDN), which will generate MathML, if your browser supports it, or HTML with CSS if not.
- Install MathJax on your own server (download). This is what I have done. Warning: there are ~30,000 files (mostly font files)!
MathJax allows you to type LaTeX (or MathML) directly into your source document, surrounded by
tags. Here is an example:
Beauty, ain’t she? Some other neat aspects:
- Right-click on the equation above to see the LaTeX source, change the format, or change the zoom trigger. Wow. That is all I have to say.
- Zoom in/out on this webpage and see the equation scale nicely!