MathJax Support for Asciidoctor

on

This is just an article for testing MathJax in Asciidoctor files.

You can use this as a testing template for all of your LaTeX math needs.

Basics

This should be an inline math content \(\LaTeX\) with the LaTeX symbol.

The following block content should contain a sentence with the LaTeX symbol.

\[\LaTeX\text{ is awesome.}\]

Whitespace

LaTeX treats whitespace characters such as tabs and spaces uniformly as one unit of space. A text that is composed of two tabs and 10 spaces consecutively is one space.

This is especially prominent in math mode (which MathJax is…​ always).

Try to render this, for example.

This is a LaTeX sentence (or I guess in MathJax).

And it’ll render as the following:

\[ This is a LaTeX sentence (or I guess in MathJax).\]

Since MathJax is in…​ perpetual math mode and specifically made for rendering math formulae, we shouldn’t have a problem with maintaining it.

Just a heads up.

Commands

One of the main syntax you should mind in MathJax are the LaTeX commands. Think of it like the HTML tags in LaTeX (although not really).

Here’s the basic construct of a LaTeX command:

\commandname[option1,option2,...]{argument1}{argument2}...

Within commands and if allowed, you can nest commands. Take this example for example:

\sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}
\[ \sum_{i=0}^{6} = \frac{i^{2}}{ 2 \bmod (i * 4)} + i^{3}\]

Reserved characters

The following characters have special meaning to LaTeX.

# $ % ^ & _ { } ~ \
\[# $ % ^ & _ { } ~ \\]

As you can see, it should result in an error or not rendered properly.

In order to render them in text, you need to add an escape character. In this case, it’s a backslash.

\# \$ \% \^ \& \_ \{ \} \~ \\
\[\# \$ \% \^{} \& \_ \{ \} \~{} \textbackslash{}\]
Note
Some of them may not render properly due to MathJax lack of support for the following. (We don’t really need those when using MathJax anyway)

Text formatting

You can do a little text formatting in a LaTeX math content (though it’s pointless to do so).

Literal text

You can make a text with \text{}.

\text{The quick brown fox jumps over the lazy dog.}
\[\text{The quick brown fox jumps over the lazy dog.}\]

Boldface text

You can make a text boldface with \textbf{}.

\textbf{The quick brown fox jumps over the lazy dog.}
\[\textbf{The quick brown fox jumps over the lazy dog.}\]

Italic text

To make a text block italic, enclose it with a \textit{} command.

\textit{The quick brown fox jumps over the lazy dog.}
\[\textit{The quick brown fox jumps over the lazy dog.}\]

Monospaced text

In order for the text to be monospaced, enclose it with a \texttt{} (text teletype) command.

\texttt{The quick brown fox jumps over the lazy dog.}
\[\texttt{The quick brown fox jumps over the lazy dog.}\]

Text in sans-serif font equivalent

Most importantly, you can make a text rendered in sans-serif with \textsf{} command.

\textsf{The quick brown fox jumps over the lazy dog.}
\[\textsf{The quick brown fox jumps over the lazy dog.}\]

More options

You can see a lot more options from this reference.

Math formatting

This is what you mostly came for, right?

All righty then. Let’s see what MathJax in Asciidoctor (M in A?) can do.

Fractions

For rendering fractions, you need to use the \frac command. The command simply needs two positional arguments.

\frac{NUMERATOR}{DENOMINATOR}

For a bit of an example:

\frac{x_1 + y_2}{x_2 + y_1}
\[\frac{x_1 + y_2}{x_2 + y_1}\]

Roots

In order to create roots, you need the \sqrt command. It only needs the content to be put inside of it as the argument.

\sqrt{2a + b}
\[\sqrt{2a + b}\]

Yes, you can nest some stuff.

\sqrt{\frac{2a + b}{a^2 - b^2}}
\[\sqrt{\frac{2a + b}{a^2 - b^2}}\]

You can specify an optional argument to change the magnitude.

\sqrt[\frac{1}{2}]{2a + b}
\[\sqrt[\frac{1}{2}]{2a + b}\]

Superscripts

In order to make superscripts, place it next to a caret character (^). To render it in more than one character, enclose it in curly brackets ({}).

2^2 * 2^{23} = 2^{25}
\[2^2 * 2^{23} = 2^{25}\]

You can also nest it within a superscript like so.

2^{2^{10}} * 2^{23^2} = \infty
\[ 2^{2^{10}} * 2^{23^2} = \infty\]

OK, I’ve gone overboard with the scale so I just put infinity as the answer instead.

Subscripts

For making subscripts, place it next to the underscore (_). Like the superscript command, if you include more than one character, enclose it in a pair of curly brackets ({}).

a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}
\[a_1 + a_2 + a_3 + ... + a_{14} = \frac{a_1 * a_{14}}{2}\]

Like superscripts and most of the commands, you can nest subscripts to another subscript (and other commands).

a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}}
\[ a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}}\]

Greek letters

You can render Greek letters with the appropriate command.

\alpha for lowercase Greek letter alpha, \beta for lowercase Greek letter beta, \gamma for lowercase Greek letter gamma, \Gamma for uppercase Greek letter gamma, you get the point.

\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi
\[\alpha, \beta, \gamma, \Gamma, \pi, \Pi, \phi, \varphi, \mu, \Phi\]

Mathematical sizing

Oftentimes, you might need to align and resize certain characters like the parenthesis or the brackets that enclose a formula or an example.

You can use the \left, \right, and \middle commands to resize the delimiters.

\left(\frac{x^2}{y^3}\right)
\[\left(\frac{x^2}{y^3}\right)\]

Since curly braces have semantic meaning to \(\LaTeX\), you need to escape it. Pretty much, it’ll look like this:

\left\{\frac{x^2}{y^3}\right\}
\[\left\{\frac{x^2}{y^3}\right\}\]

A lot more!

You have a whole slew of mathematical symbols available. Please refer to this list of LaTeX mathematical symbols. Though I don’t know what’s missing symbols and whatnot (since I don’t MathJax often) but it should be enough.

You can also go to this web page that details using MathJax on Quora by Gilles Castel. It is specifically made for writing \(\LaTeX\) on Quora but it can be used as a general MathJax guide, anyways.