Sunday, August 28, 2016

Writing Equations on the Web


$$\sigma^{2} = \frac{1}{N-1} \sum_{i=0}^{N-1} (x_i - \mu)^{2}$$
An important requirement arose for me recently which didn't occur for many years of my blogging experience. I wanted to write some complex equations on my blog posts here in my blog. The first idea came in to my mind is preparing the equations on Latex somewhere else and then inserting them inside blog posts as images. But I wanted something better than that so I kept searching. Finally I found the right tool to do it.

MathJax is a JavaScript library which we can include in our web pages. Then we can various syntaxes to write equations in our web pages. The most important point is, I can write my most familiar Latex equation syntax inside HTML documents leaving MathJax to handle how to render them on the client web browsers. Here are the simple steps to do this on a blog article hosted in a blogger.com site such as my blog.

(1)
Put the following lines in the top of the HTML content of the web page first inside the <head> tags. In case you are doing it in a blogger.com article, you have to goto the HTML view first and then add these lines on the top.


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

(2)
Now we are ready to write an equation. We can use Latex math syntax for this but depending on the place we put the equations, we have to use two different tags. In order to write some mathematical text in-line, we have to enclose them inside a \( and \) tags. To put mathematical equations separated from the main texts, we have to enclose them inside a $$ and $$ tags.

Here is an example text line where I will put an in-line equation using \( and \) tags as follows. \( y = ax + b \). Did you see the equation? It was originally written as follows within the text line.

\( y = ax + b \)

OK then here's how we put an equation outside the main text using $$ and $$ tags.

$$\sigma^{2} = \frac{1}{N-1} \sum_{i=0}^{N-1} (x_i - \mu)^{2}$$

It was originally written as follows in the HTML source code.


$$\sigma^{2} = \frac{1}{N-1} \sum_{i=0}^{N-1} (x_i - \mu)^{2}$$

Enjoy writing equations on web pages!

References:
[1] https://www.mathjax.org/
[2] http://docs.mathjax.org/en/latest/start.html

No comments:

Post a Comment