Full-Stack Engine

Using MathJax to write LaTeX code in HTML

In a previous post I wrote about Machine Learning, a subject intrinsically related to Math, equations and all sort of mathematical equations. As might know, HTML has the necessary means to present typography, i.e., bold, italics, font size and others, as it also has some basic definitions for how a table, ordered list, headers, and titles.

Nevertheless, you can use CSS to modify the styles, it has important limitations when it comes to express a complex (in form) mathematical expression, for example, a sum with sub and super indices and fractions, like this:

$$\frac{\delta}{\delta \theta_0} = \frac{1}{m} \sum_{i=1}^{m} (h_\theta(x) - y)$$

Easier and better way to do Math.

To get the previous equation rendered, it's easier to use a third party library, instead of trying to use the necessary tools like CSS styling or even building a JavaScript library on your own.
Good news is there is a JS Math library to write mathematical expressions in a fancy and developer-friendly way, even more, you can use $\LaTeX$ or Markdown. It's called MathJax.

Let's see how you can use MathJax on your website site to include math expressions in a fancy and way. In the following examples, I'll be using LaTeX as the markup language.

Setup

The first step is to include a reference to MathJax library in your page footer, adding the following CDN script,

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Moreover, you can start writing math right away.

Ghost editor

On the other hand, if you are writing an article using ghost (as I do with this blog), you can add these adittional lines using Code Injection in the Post Footer:

Similar to the following snippet in "Post Settings",

mathJax_inj

The lines enclosed by the script tag allows us to use "escape" characters "$" to inline math expressions in a single line, instead of breaking it, and "\" works breaking lines inside the math expressions.

How it works

As you could've already noticed, MathJax uses scape characters "$$" (for math expressions in a new line) and "$" (for inlining) to parse the contents inside them and automatically replace them with a special rendered HTML section in a WYSIWYG fashion way.

For example, consider the following latex snippet,[1]

$$ J(\theta) = \frac{1}{m} \sum^m_{i=1} Cost(h_\theta(x),y) $$

This expression translates or renders into the following equation,

$$ J(\theta) = \frac{1}{m} \sum^m_{i=1} Cost(h_\theta(x),y) $$

Let's do the Math!

That's it. You start writing math in your web page's content very easily following these simple steps. I Hope you've found this useful for your future projects.

Thank so much for reading this post. Please stay tuned for more exciting news and full-stack topics. Take care!.


  1. This equation represents the Cost function for logistic regression, for more information about this subject and other Machine Learning algorithms, please take a look at this article ↩︎

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.