What is MathJax

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. MathJax has a rich application programming interface (API) that can be used to make the mathematics on your web pages interactive and dynamic.

Here are some main features:

  • MathJax is a cross-browser JavaScript library
  • MathJax displays mathematical notation in web browsers
  • MathJax uses CSS with web fonts or SVG, instead of bitmap images or Flash
  • MathJax using MathML, LaTeX and ASCIIMathML markup
  • MathJax is highly modular on input and output. Use MathML, TeX, and ASCIImath as input and produce HTML+CSS, SVG, or MathML as output
  • MathJax works with screenreaders & provides expression zoom and interactive exploration. You also can copy equations into Office, LaTeX, wikis, and other software.
  • Version 3.0 of MathJax is the latest version. It is a complete rewrite of MathJax from the ground up, and its usage and configuration is significantly different from that of MathJax version 2.

Example

For example for displayed formulas, use $$…$$. Type the following for display mode: $$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$. It will turn into:

\[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]

You can also use \begin{equation}...\end{equation} instead of $$ for display mode math. MathJax will automatically number equations:

\begin{equation}
\label{eq:cauchy-schwarz}
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
\end{equation}

It will turn into: \begin{equation} \label{eq:cauchy-schwarz} \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \end{equation}

Get more informaiton at mathjax offical document and mathjax-basic-tutorial

What is MathML

Maybe you want to know a bit about Mathematical Markup Language (MathML). There are a number of mathematical markup languages, And MathML is a popular one.

MathML is a mathematical markup language, an application of XML for describing mathematical notations and capturing both its structure and content, and is one of a number of mathematical markup languages. Its aim is to natively integrate mathematical formulae into World Wide Web pages and other documents. It is part of HTML5 and standardised by ISO/IEC since 2015.

What is mjx-container?

mjx-container is custom element (specific selector) for MathJax content. You can think that like below:

<mjx-container>
MathJax content...
</mjx-container>

Example1

This will also provide display-mode math with scroll bars if they are too long. If you want to do this only for inline math, then use mjx-container:not([display]) instead.

<style>
mjx-container {
  display: inline-grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

<div style="width:15em; border: 1px solid; padding: 3px 5px">
This is some text with a long in-line math expression
\(a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\)
that we hope will have a scroll bar!  This math \(x+y+z\) should not.
Long display math also gets a scroll bar:
\[a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\]
</div>

just test, make git action is working

This is some text with a long in-line math expression \(a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\) that we hope will have a scroll bar! This math \(x+y+z\) should not. Long display math also gets a scroll bar: \[a+b+c+d+e+f+g+h+i+j+k+l+m+n+o+p+q+r+s+t+u+v+w+x+y+z\]