Introduction to MathJax
MathJax is a library written in JavaScript, that is used to display mathematical formulas and notations in the browsers quite easily and efficiently. It is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. MathJax does not require any kind of setup making it easier on the client-side to view it naturally and without any difficulty. This library is built on the top of MathML.
Features:
- Easy to write in the browser and flexible to read.
- Supported in most of the latest versions of the browsers.
- Powerful API Integration.
Installation using a CDN:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>
Installation in Nodejs:
npm install mathjax
The below examples illustrate the use-cases of MathJax:
Example 1:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Math jax</ title > </ head > < body > <!-- Using mathjax style to write math notation in browser --> < br />quadratic equation: \(px^2 + qx + r = 0\) < br /> roots of quadratic equation: $$x = {-q \pm \sqrt{q^2-4pr} \over 2p}.$$ < br /> Einstein equation: E=\(mc^2\) < br /> Linear equation: \(ax+by+c\) <!-- Linking to CDN --> < script id = "MathJax-script" async src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" > </ script > <!-- Configuration of math jax --> < script > MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }, svg: { fontCache: 'global' } }; </ script > </ body > </ html > |
Output:
Example 2: This example shows the changing of the color of the text.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >Math jax</ title > </ head > < body > <!-- Using mathjax style to write math notation in browser --> <!-- Setting color to green --> < br />quadratic equation: ${\color{green} ax^2+bx+c=0}$ < br /> roots of quadratic equation: $$x = {-q \pm \sqrt{q^2-4pr} \over 2p}.$$ < br /> <!-- Setting color to red --> Einstein equation: E=${\color{red} mc^2}$ < br /> Linear equation: ${\color{blue} ax+by+c}$ <!-- Linking to CDN --> < script id = "MathJax-script" async src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" > </ script > <!-- Configuration of math jax --> < script > MathJax = { autoload: { color: [], colorV2: ['color'] }, tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] }, svg: { fontCache: 'global' } }; </ script > </ body > </ html > |
Output: