Getting started
Formulas can be displayed in a
HTML document with MathJax.
To do so, the document needs to include the MathJax library:
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=…"></script>
MathJax's documentation has the following note about the config parameter (TeX-AMS-MML_HTMLorMML):
The TeX-MML-AM_CHTML configuration is one of the most general (and thus largest) combined configuration files. We list it here because it will quickly get you started using MathJax. It is probably not the most efficient configuration for your purposes and other combined configuration files are available.
A MathJax formula can then be displayed by putting it between two double-dollar signs:
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
In-line formulas must be put between single dollar signs ($a \ne $b).
However, for that to work, the following MathJax configuration needs to be added in the document:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>MathJax: getting started</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
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}.$$
</body>
</html>
config=AM_CMHTML (Ascii Math)
The following example uses config=AM_CMHTML which enables entering (simple) formulas more readably.
With this configuration, the formula is enclosed in backticks.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>MathJax: AsciiMath</title>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML" ></script>
</head>
<body>
`f(x) = sin(x/2 * pi)`
</body>
</html>
Left aligning formulas
Using <table> to left align formulas
By default, MathJax centers a (non-inline) formula on the page.
When putting it into a
<table>, it is rendered left aligned. I would assume that there are more canonical ways to achieve this, but that was the first and cheapest one that worked for me.
<!DOCTYPE html>
<html>
<head>
<meta content ="text/html;charset=utf-8"
http-equiv="Content-Type">
<title>Simple MathJax example</title>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML" ></script>
</head>
<body>
Some text, followed by a (left-aligned) formula:
<table><tr><td>
` E=mc^2 `
</td></tr></table>
</body>
</html>
The more canonical way?
Update 2023-01-23: is using $\begin{aligned} … \end{aligned}$ the more canonical way to left align formulas? At least it seems so:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Left align</title>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"> </script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
</head>
<body>
<h1>Activation Formula</h1>
$\begin{aligned}
\sigma(x) = \frac{1}{1 + e^{-x}}
\end{aligned}$
</body>
</html>
config=TeX-AMS_HTML-full
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>MathJax: tex</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});
</script>
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full" ></script>
</head>
<body>
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}.$$
</body>
</html>