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