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.*

- React UI tutorial – Building Instagram video player using HTML and CSS Flex - July 27, 2020
- How to open emoji keyboard on Windows or Mac - July 17, 2020
- 8 ways to optimize React native FlatList performance - July 16, 2020

Hi, I did try as have some equations to add to ah HTML I am writing but found the inline did not happen, instead writing /inline on the page.

Groovy start to my new learning though.