Notes to Myself re: MathJax version 2

MathJax v2 is enabled for this page

Preamble

I can never remember all the minutiae of anything so I'm lumping MathJax stuff that's relevant to me over here. This is therefore a crib sheet of sorts.

This page is configured as follows:

See how all the MathJax code below works with MathJax v3 enabled instead of v2

On this Page

Useful References

Useful Quotes

MathJax default delimiters

The default math delimiters are $$...$$ and \[...\] for displayed mathematics, and \(...\) for in-line mathematics. Note in particular that the $...$ in-line delimiters are not used by default.

To use $ \rm\TeX $ and $ \rm\LaTeX $ inline delimiters, place the following script before the MathJax.js call <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], processEscapes: true } }); </script>

To enable automatic equation numbering, place the following script before the MathJax.js script <script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } } }); </script>

To enable automatic line breaking, place the following script before the MathJax.js script <script type="text/x-mathjax-config"> MathJax.Hub.Config({ CommonHTML: { linebreaks: { automatic: true } }, "HTML-CSS": { linebreaks: { automatic: true } }, SVG: { linebreaks: { automatic: true } } }); </script>

To enable the use of various cancel commands, the following script before the MathJax.js script <script type="text/x-mathjax-config"> MathJax.Hub.Config({ TeX: { extensions: ["cancel.js"] } }); </script>

Combined configuration for enabling $ \rm\TeX $ and $ \rm\LaTeX $ inline delimiter, automatic equation numbering, enabling cancel commands, and auto line breaking <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], processEscapes: true }, TeX: { equationNumbers: { autoNumber: "AMS" }, extensions: ["cancel.js"] // for various \cancel commands (see https://docs.mathjax.org/en/v2.7-latest/tex.html#cancel) }, CommonHTML: { linebreaks: { automatic: true } }, "HTML-CSS": { linebreaks: { automatic: true } }, SVG: { linebreaks: { automatic: true } }, }); <script>

Some MathJax Output Processors

The CommonHTML output processor produces high-quality output in all modern browsers, with results that are consistent across browsers and operating systems. This is MathJax’s primary output mode since MathJax v2.6. Its major advantage is its quality, consistency, and speed as well as support for server-side generation. Its browser supports starts with IE9 and equivalent browsers and it degrades gracefully on older browsers. The CommonHTML output uses web-based fonts so that users don’t have to have math fonts installed on their computers, but will use locally installed ones if they are available. It currently only supports MathJax’s default TeX fonts.

The HTML-CSS output processor produces high-quality output in all browsers, with results that are consistent across browsers and operating systems. This was MathJax’s primary output mode prior to MathJax v2.6. Its major advantage is its quality and consistency on legacy browsers starting with IE6. The HTML-CSS output uses web-based fonts so that users don’t have to have math fonts installed on their computers but can use locally installed fonts instead.

The SVG output processor uses Scalable Vector Graphics to render the mathematics on the page. SVG is supported in all the major browsers and most mobile devices; note, however, that Internet Explorer prior to IE9 does not support SVG, and IE9 only does in “IE9 standards mode”, not its emulation modes for earlier versions. The SVG output mode is high quality and somewhat faster than HTML-CSS, and it does not suffer from some of the font-related issues that HTML-CSS does, so prints well in all browsers. Since it uses SVG data instead of font files, it is not affected by user based web-font blocking. One disadvantage of this mode is that its variable-width tables become fixed size once they are typeset, and don’t rescale if the window size changes (for example). Since equation numbers are handled through variable-width tables, that means equation numbers may not stay at the edge of the window if it is resized. Also, because its mathematical characters are produced by paths, not characters in a font, they can’t be copy and pasted, as the output of the HTML-based processors can.

What are $\rm\LaTeX$ environments?

Environments are delimited by an opening tag \begin and a closing tag \end. Everything inside those tags will be formatted in a special manner depending on the type of the environment.

A stylized $\rm\LaTeX$ typography using HTML-CSS has been created by Overleaf. Originally an inline CSS, I've taken the liberty of styling using classes. The HTML and CSS are as follows:

<span class="latex_L">L<span class="latex_a">a</span>T<span class="latex_e">e</span>X<span> span.latex_L { font-family: 'CMU Serif', 'cmr10', 'LMRoman10-Regular', 'Times New Roman', 'Nimbus Roman No9 L', Times, serif; } span.latex_a { text-transform: uppercase; font-size: 70%; margin-left: -0.36em; vertical-align: 0.3em; line-height: 0; margin-right: -0.15em; } span.latex_e { text-transform: uppercase; margin-left: -0.1667em; vertical-align: -0.5ex; line-height: 0; margin-right: -0.125em; }

Inline Delimiters

If MathJax configuration has been set to use single dollar symbol then inline code delimiters can either be $ ... $ or \( ... \).

To number equations manually use \tag{}. A side effect is that the equation is rendered as a block (displayed mathematics).

Line breaks \\ can be used within inline delimiters to break an equation over several lines.

If an equation needs to be numbered and then referenced at another place in the document then adding \tag{some_unique_identifier} \label{some_unique_identifier} allows this and the equation can be referenced and linked through the use of \ref{some_unique_identifier} or \eqref{some_unique_identifier}.

The use of ampersand symbol for vertical alignment of rows does not work with inline delimiters.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] $ y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 $ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text]$ \tag{inlineA} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 $[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \tag{inlineA} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text]$ \tag{inlineB} \label{inlineB} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 $[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \tag{inlineB} \label{inlineB} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $ y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 $ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $ y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 $ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{inlineB} Equation \ref{inlineB}
Equation \eqref{inlineB} Equation \eqref{inlineB}

Block Delimiter (Displayed Mathematics)

Block delimiters can be either $$ ... $$ or \[ ... \]

To number equations manually use \tag{}. A side effect is that the equation is rendered as a block (displayed mathematics).

If an equation needs to be numbered and then referenced at another place in the document then adding \tag{some_unique_identifier} \label{some_unique_identifier} allows this and the equation can be referenced and linked through the use of \ref{some_unique_identifier} or \eqref{some_unique_identifier}.

Line breaks \\ can be used to break an equation over several lines, but the use of ampersand symbol for vertical alignment of rows does not work with block delimiters.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] $$ y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 $$ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $$ y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 $$ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $$ y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \tag{blockA} $$ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $$ y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \tag{blockA} $$ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $$ y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \tag{blockB} \label{blockB} $$ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $$ y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \tag{blockB} \label{blockB} $$ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $$ y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 $$ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $$ y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 $$ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{blockB} Equation \ref{blockB}
Equation \eqref{blockB} Equation \eqref{blockB}

Equation Environment and Automatic Equation Numbering

Despite automatic equation numbering enabled in MathJax configuration, using common inline or block ("displayed mathematics") delimiters such as $...$ \(...\), $$...$$, \[...\] do not result in automatically numbered equations. One has use \begin{equation} ... \end{equation} delimiters

\label{some_unique_identifier} provides a way of giving the equation a unique html ID to link to when the equation number is clicked by the user. The equation can then be referenced using \ref{some_unique_identifier} or \eqref{some_unique_identifier}, the latter form enclosing the equation number in parentheses.

With automatic equation numbering set in configuration using \begin{equation*}...\end{equation*} will result in suspension of automatic equation numbering for the particular equation. In general the addition of the asterisk suspends auto equation numbering in that instance. However, it's easier to just use the common inline and block delimiters to preclude equation numbering

Line breaks \\ can be used to break an equation over several lines, but the use of the ampersand symbol for vertical alignment of rows does not work in the equation environment.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] \begin{equation} \label{equationA} y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \label{equationA} y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation*} y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \end{equation*} [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation*} y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \end{equation*} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \label{equationB} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \label{equationB} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{equationA} Equation \ref{equationA}
Equation \eqref{equationA} Equation \eqref{equationA}
Equation \ref{equationB} Equation \ref{equationB}
Equation \eqref{equationB} Equation \eqref{equationB}

Gather Environment

The gather environment is used "to display any number of centered formulas (without any alignment); a double backslash ‘\\’ or carriage return ‘\cr’ separates rows; individual lines may be tagged using the \tag{} command."

With automatic equation numbering set in configuration using \begin{gather*}...\end{gather*} will result in suspension of automatic equation numbering for the particular equation. In general the addition of the asterisk suspends auto equation numbering in that instance. However, it's easier to just use the common inline and block delimiters to preclude equation numbering

The use of the ampersand symbol for vertical alignment of rows does not work in the gather environment.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] \begin{gather} y = 1234x^4 + 5678x^3 \label{gatherA} \\ - 9012x^2 + 3456x \label{gatherB} \\ - 7890 \label{gatherC} \end{gather}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{gather} y = 1234x^4 + 5678x^3 \label{gatherA} \\ - 9012x^2 + 3456x \label{gatherB} \\ - 7890 \label{gatherC} \end{gather} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{gather*} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \end{gather*} [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{gather*} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \end{gather*} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{gather} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{gather}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{gather} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{gather} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \eqref{gatherA} Equation \eqref{gatherA}
Equation \eqref{gatherB} Equation \eqref{gatherB}
Equation \eqref{gatherC} Equation \eqref{gatherC}

Split and Aligned Environments—An Equation Over Several Lines

The Split and Aligned environments are practically synonnymous, both having the same properties and functions.

Double backslash designates line break. Ampersand designates the point for vertical alignment of rows. The ampersand is not necessary, but without it MathJax decides how to align the rows.

By enclosing the split or aligned environment in inline delimiters the equation is turned into inline.

By enclosing the split or aligned environment in \begin{equation}...\end{equation} the equation is automatically numbered. Unlike the align environment only one number is assigned to the equation even with line breaks.

If the equation number is going to be referenced then \label{} must be placed between \end{split} and \end{equation} for the split environment or between \end{aligned} and \end{equation} for the aligned environment. Placing it anywhere else will not work.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] \begin{split} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \end{split}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{split} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \end{split} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{split} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{split}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{split} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{split} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text]$ \begin{split} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{split} $[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \begin{split} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{split} $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} \begin{split} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{split} \label{splitA} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \begin{split} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{split} \label{splitA} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{splitA} Equation \ref{splitA}
Equation \eqref{splitA} Equation \eqref{splitA}
$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] \begin{aligned} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \end{aligned}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{aligned} y = 1234x^4 + 5678x^3\\ - 9012x^2 + 3456x\\ - 7890 \end{aligned} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{aligned} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{aligned}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{aligned} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{aligned} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text]$ \begin{aligned} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{aligned} $[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \begin{aligned} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{aligned} $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} \begin{aligned} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{aligned} \label{alignedA} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \begin{aligned} y &= 1234x^4 + 5678x^3\\ &- 9012x^2 + 3456x\\ &- 7890 \end{aligned} \label{alignedA} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{alignedA} Equation \ref{alignedA}
Equation \eqref{alignedA} Equation \eqref{alignedA}

Align Environment—Multiple Equations Over Several Lines

Double backslash designates line break. Ampersand designates the point for vertical alignment of rows

Notice that every line is automatically assigned an equation number. Only one \label{} can be placed per row, i.e., only one per line break.

With asterisk symbol \begin{align*}...\end{align*} equation numbering is suspended

Enclosing the align environment in inline delimiters turns the equation into inline form.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] \begin{align} y &= 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \label{alignA} \\ z &= 98x + 76 \label{alignB} \\ 5.4x^2 - 3x &= w - 21 \label{alignC} \end{align}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{align} y &= 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \label{alignA} \\ z &= 98x + 76 \label{alignB} \\ 5.4x^2 - 3x &= w - 21 \label{alignC} \end{align} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{align*} y &= 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \\ z &= 98x + 76 \\ 5.4x^2 - 3x &= w - 21 \end{align*}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{align*} y &= 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \\ z &= 98x + 76 \\ 5.4x^2 - 3x &= w - 21 \end{align*} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $ \begin{align*} y &= 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \\ z &= 98x + 76 \\ 5.4x^2 - 3x &= w - 21 \end{align*} $[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \begin{align*} y &= 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \\ z &= 98x + 76 \\ 5.4x^2 - 3x &= w - 21 \end{align*} $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \eqref{alignA} Equation \eqref{alignA}
Equation \eqref{alignB} Equation \eqref{alignB}
Equation \eqref{alignC} Equation \eqref{alignC}

Adding and Reducing Spaces

MathJax can be forced to add spaces between characters

Every instance of a backslash followed by a space adds one space. \quad adds about four spaces. And \qquad doubles that amount. Other options can be found at Overleaf, particularly those to reduce spacing.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
$ y = 1234x^4 + 5678x^3\\ \ \ - 9012x^2 + 3456x\\ \ \ - 7890 $ $ y = 1234x^4 + 5678x^3\\ \ \ - 9012x^2 + 3456x\\ \ \ - 7890 $
$ y = 1234x^4 + 5678x^3\\ \quad - 9012x^2 + 3456x\\ \quad - 7890 $ $ y = 1234x^4 + 5678x^3\\ \quad - 9012x^2 + 3456x\\ \quad - 7890 $
$ y = 1234x^4 + 5678x^3\\ \qquad - 9012x^2 + 3456x\\ \qquad - 7890 $ $ y = 1234x^4 + 5678x^3\\ \qquad - 9012x^2 + 3456x\\ \qquad - 7890 $
$$ 6.0221409\times10^{23} \mathrm{mol}^{-1} $$ $$ 6.0221409\!\times\!10^{23} \ \mathrm{mol}^{-1} $$ $$ 6.0221409\times10^{23} \mathrm{mol}^{-1} $$ $$ 6.0221409\!\times\!10^{23} \ \mathrm{mol}^{-1} $$

Cancel Commands

$\rm\LaTeX$-MathJax Code As Rendered by Browser
$$ \cancel{y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ $$ \bcancel{y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ $$ \xcancel{y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ $$ \cancel{y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ $$ \bcancel{y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ $$ \xcancel{y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$

Background Colors and Borders

Background colors and borders can be added to equations using \bbox[]. Colors can be specified by name, 3- or 6-digit hex code, rgb(x,y,z), among other ways. Padding and border thickness can be specified and should be in pixels.

The part of the equation to which background and border will be applied must be enclosed in curly braces. Any \label{} must be placed outside of the braces.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] \begin{equation} \label{backgroundA} \bbox[#fd0,10px] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \label{backgroundA} \bbox[#fd0,10px] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $ \bbox[lime,10px] {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \bbox[lime,10px] {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $$ \bbox[#a9c8d7,10px] {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $$ \bbox[#a9c8d7,10px] {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} \label{borderA} \bbox[border: 5px solid blue] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \label{borderA} \bbox[border: 5px solid blue] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} \label{borderB} \bbox[10px, border: 5px solid blue] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \label{borderB} \bbox[10px, border: 5px solid blue] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} \label{borderC} \bbox[#aaa, 10px, border: 5px solid blue] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \label{borderC} \bbox[#aaa, 10px, border: 5px solid blue] { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{backgroundA} Equation \ref{backgroundA}
Equation \eqref{backgroundA} Equation \eqref{backgroundA}
Equation \ref{borderC} Equation \ref{borderC}
Equation \eqref{borderC} Equation \eqref{borderC}

Colors

Font color can be changed from default by using \color{}. Colors can be specified by name, 3- or 6-digit hex code, rgb(x,y,z), among other ways.

The part of the equation to which colored fonts will be applied must be enclosed in curly braces. Any \label{} must be placed outside of the braces.

$\rm\LaTeX$-MathJax Code As Rendered by Browser
[text] $ \color{red} {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $ \color{red} {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] $$ \color{#567} {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ [text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. $$ \color{#3a3} {y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} $$ Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
[text] \begin{equation} \color{rgb(100,50,200)} { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890 \label{colorA} } \end{equation}[text] Bacon ipsum dolor amet picanha bacon pig beef ribs. Pancetta ham prosciutto, fatback rump turkey pork loin meatball. \begin{equation} \color{rgb(100,50,200)} { y = 1234x^4 + 5678x^3 - 9012x^2 + 3456x - 7890} \label{colorA} \end{equation} Cow salami biltong pig t-bone tenderloin meatloaf beef ribs alcatra buffalo pastrami.
Equation \ref{colorA} Equation \ref{colorA}
Equation \eqref{colorA} Equation \eqref{colorA}

Styling Using CSS

Using CSS to style equations via \class{}{}, \cssId{}{} and \style{}{}

$\rm\LaTeX$-MathJax Code As Rendered by Browser
<style> .cssByClass { border: 2px dashed #f00; padding: 1em 0.5em; color: blue; font-size: larger; } </style> $$ \class{cssByClass}{z = 98x + 76} $$ $$ \class{cssByClass}{z = 98x + 76} $$
<style> #cssById { border-top: 5px solid brown; border-bottom: 2px solid black; padding: 0.5rem 5rem; background: greenyellow; color: gray; } </style> $$ \cssId{cssById}{z = 98x + 76} $$ $$ \cssId{cssById}{z = 98x + 76} $$
$$ \style{color: green; background: tan; padding: 1rem}{z = 98x + 76} $$ $$ \style{color: green; background: tan; padding: 1rem}{z = 98x + 76} $$

"$ \rm\LaTeX $" typography in MathJax

As with other commands \LaTeX and \TeX are case sensitive

$\rm\LaTeX$-MathJax Code As Rendered by Browser
$$ \LaTeX \\ \rm\LaTeX \\ \mathrm{\LaTeX} \\ \rm\large\LaTeX \\ \mathrm{\large\LaTeX} \\ \rm\Large\LaTeX \\ \mathrm{\Large\LaTeX} $$ \LaTeX \\ \rm\LaTeX \\ \mathrm{\LaTeX} \\ \rm\large\LaTeX \\ \mathrm{\large\LaTeX} \\ \rm\Large\LaTeX \\ \mathrm{\Large\LaTeX} $$
$$ \TeX \\ \rm\TeX \\ \mathrm{\TeX} \\ \rm\large\TeX \\ \mathrm{\large\TeX} \\ \rm\Large\TeX \\ \mathrm{\Large\TeX} $$ $$ \TeX \\ \rm\TeX \\ \mathrm{\TeX} \\ \rm\large\TeX \\ \mathrm{\large\TeX} \\ \rm\Large\TeX \\ \mathrm{\Large\TeX} $$