Sunday, December 4, 2011

Mathematics and MathJax

You know how I'm always saying \(\LaTeX\) makes math look beautiful? Well, yesterday I stumbled upon a way to get that same look in HTML. It's called MathJax, and it's really quite neat. All you have to do is link a JavaScript script in the header of your webpage (accomplished by editing my Blogger template), and the script will go through and convert any \(\LaTeX\) formatting into proper HTML that should be able to be rendered by any browser.

With MathJax, you can have inline equations like \(a^2+b^2=c^2\), or equations displayed with their own focus, like this:
\[ x = {-b\pm\sqrt{b^2-4ac}\over2a}\tag{1}\]
\[e^{i\pi}+1=0 \tag{2}\]
((1) is the quadratic formula; (2) is Euler's Identity)

This happens to be extremely fortuitous, because I was just thinking of writing a post with some calculus in it, and was pondering how to get the equations in. Now with MathJax, I'll be able to write a lot more about math in the future.

Edit (12/4/11): In case anyone would like to use MathJax in their own blog (or other website), here's how to do it. You need to put a line linking to the MathJax script in the header of your site. To accomplish that with Blogger, you need to access your blog's template (the easiest way to do that is to click on the "Design" link at the top right of the screen). Once there, click on the "Edit HTML" button. It'll bring up a dialog reminding you that can seriously mess up your blog if you don't don't know what you're doing. Click "Proceed", whereupon you'll be able to see the code underlying you blog. Once there just paste the following code somewhere in the header of your template; I'd suggest putting right before the line with "<b:skin><![CDATA[/*".
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ TeX: { extensions: ["autobold.js"] }});
</script>
<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
Note that by default this script doesn't process AMS (American Mathematical Society) symbols or commands. Since the AMS packages are very helpful, there's an easy way to include them. Simply add the following options to the "extensions" list, right after "autobold.js".
"AMSmath.js", "AMSsymbols.js"
That should be it! Try writing some \(\LaTeX\) expressions enclosed in either
\(...\)
or
\[...\]
for inline and displayed math, respectively. Check out the MathJax webpage if you need more help or information.

2 comments:

  1. Hey this is actually pretty helpful! I've been meaning to set up my grad student page at GMU for a while now, and this might come in handy. Thanks for the pointers!

    ReplyDelete
  2. Good! Glad it could be helpful.

    ReplyDelete

Think I said something interesting or insightful? Let me know what you thought! Or even just drop in and say "hi" once in a while - I always enjoy reading comments.