Oct 27, 2019
Back to all Elements
The script allows math formulas to be written anywhere within the HTML code. To start the inline math you use either a dollar sign $ or you can use a slash and an open parentheses "/(". To end the inline math, you have another dollar sign or a back slash and a closing parentheses. Enclosing in double dollar signs put the math on a seperate line.
So, let's get to it-
First we add the MathJax JS library and the Polyfill.js dependency in our page
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Now we add the MathJax function to initiate the script and define what is a math formula:
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
};
</script>
If you need to use a dollar sign in the text, you can use a backslash before the dollar sign. "\$"
Dollar sign before and after:
$y=mx+1$
Parenthesis:
\(y=mx+2\)
Double Dollar Signs:
$$y=mx+3$$
Hard Bracket:
\[y=mx+5\]
In a sentence:
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
.png)
.png)