How to display maths formulas and equations in a webpage

Writing this post reminds me of those scary maths formulas that we used in school and college! I don’t remember any of those formulas now. Recently I was working on a web app which displays question papers and their answers helping the students with their last minute study. So we also have to show some maths formulas, physics equations etc

Let’s see an example of a maths equation.

Above Maths equation is an image. The first thing that came to my mind was to display those equations and formulae as images but we have to thousands of questions and answers with hundreds of equations and maths formulas. Generating images for these equations is not scalable and also costs more data to the user.

So I started looking out for a different solution and found this awesome Javascript library called MathJax which displays Math equations using HTML, CSS and SVGs.

MathJax is a JavaScript display engine for mathematics that works in all browsers. It uses normal HTML text and styles them with CSS to look like formulas.

How it works

MathJax uses MathML, Latex and ASCIImath as input and outputs HTML with CSS which look like formulas. Latex is one of the widely used formats for writing equations so I chose Latex.

How to generate latex first

We can use any online Latex editor to generate Latex. Try this simple one upmath – Latex editor online

Lets look at an example.

Getting started with MathJax

All you have to do is include MathJax in your page and change config options if required. MathsJax detects Latex format and converts them into formulas.

MathJax CDN

Include MathJax library using their CDN or by downloading it.

CDN snippet :

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script>

MathJax Config

Configuration options can be set using config method.

MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});

MathJax takes care of everything else!

Wrapping up

Here’s a demo codepen embedded below.

See the Pen How to display Maths formulas in webpage by Ranjith (@Ranjithkumar10) on CodePen.23550

If you have and questions or feedback, comment below.

• Author
• Recent Posts

Ranjith kumar

A CA- by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.

Latest posts by Ranjith kumar (see all)

• Curved button using Flutter | Can it be done with Flutter? | Custom shapes Flutter | Custom painter - September 21, 2022
• Dynamic Island using Flutter | iPhone 14 Pro | Can it be done with Flutter? - September 14, 2022
• Best practices of scraping website data for beginners (Updated 2022) - September 12, 2022