Blog: mathjax

Math in a Webpage

Besides being a priest I also teach math. When a student emails you with a math question, putting the answer in an email can be a daunting prospect. Often the quickest options for a single question is writing the answer out on paper, scanning it, saving it as a pdf, and sending it to the student. But what do you do if you want to do something more formal.

The answer in the past and still today LaTeX. It is a type setting program that is very math and science friendly. Using LaTeX involves creating the document then compiling it often as a pdf. This is a great solution for class handouts that you will print and give to students. However if you want to embed the information in a webpage LaTeX is not the best tool. It is a type setting program not an html editor.

I came across a program this weekend that fits the bill, MathJax. MathJax is a JavaScript display engine for Mathematics. The Mathjax website is https://www.mathjax.org MathJax supports many different formats including LaTeX. You simple add a link to the MathJax library in the header or body of your html document, and then enter your mathematical expression enclosed in the appropriate tags.

Example enter <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"> </script> in the header or body of your html document.

Now if you want to display the quadratic Formula enter \( {x = \frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}} \) This entry is in LaTeX form because that is what I am familiar with. You may check the MathJax website for what formats are supported. For those who are familiar with LaTeX you may notice the enclosing tags are \( and \) and not $ $ even though the MaxJax website says it supports $ tags I could not get the equation to display properly unless I used \( and \) as tags.

Another gotcha I found is if you are using a CMS that uses markdown. Which is the case with my website I had to enclose any line with a math formula in it with <p> </p> HTML tags.

I find this an easy way to post information for students.

\( {x = \frac{{ - b \pm \sqrt {b^2 - 4ac} }}{{2a}}} \)