'Homo sapiens is the species that invents symbols in which to invest passion and authority, then forgets that symbols are inventions.' -Joyce Carol Oates

# Display Math Equations on Your Website

by Ethan Glover, Sat, Oct 25, 2014 - (Edited) Sat, Oct 25, 2014

Occasionally with this site I like to display items that involve special symbols. For example, in a recent post about sorting algorithms I used the Theta symbol a lot in order to refer to asymptotic notation. While HTML does provide a way to display this symbol easily, sometimes HTML doesn't cut it, especially with long formulas, equations and functions. For instance, how would one show L'Hopital's rule? It certainly can be done, just type this:

$$lim_{xto 0}{frac{e^x-1}{2x}} overset{left[frac{0}{0}right]}{underset{mathrm{H}}{=}} lim_{xto 0}{frac{e^x}{2}}={frac{1}{2}}$$

Of course, you can't just type that in. What it requires is MathJax and LaTeX. With this tutorial, I assume you're familiar with LaTeX. It's pretty easy to learn, just check out the sources I have listed on it over at Liberty Resource Directory. Instead, I want to show you how to include MathJax on your website. A very easy thing to do.

In the head section of your page just include some very simple code in order to link your page to the MathJax libraries. It looks like this:

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


From here including LaTeX code is quite simple. If you want to put an equation inline use something like (Theta(n^2)) to display (theta(n^2)) . Notice that what is displaying the code is the backslash and parentheses ( ... ).

For longer code that should be displayed on it's own line such as the L'Hopital's Rule displayed above, just change those parentheses to square brackets like this. [ ... ]. So in order to display that code, it would look something like this:

[
lim_{xto 0}{frac{e^x-1}{2x}}
overset{left[frac{0}{0}right]}{underset{mathrm{H}}{=}}
lim_{xto 0}{frac{e^x}{2}}={frac{1}{2}}
]


Simple as (pi)!