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.
- Flutter lookup failed in @fields error (solved) - July 14, 2023
- Free open source alternative to Notion along with AI - July 13, 2023
- Threads API for developers for programmatic access - July 12, 2023
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.