hugo-theme-more-contentful/exampleSite/content/en/articles/mathjax-support-for-asciidoctor.adoc

---
title: "MathJax Support for Asciidoctor"
date: 2019-08-28T01:47:02+08:00

categories:
    - "asciidoctor"
tags: 
    - "asciidoctor"
    - "mathjax"
    - "guide"
---

= MathJax Support for Asciidoctor
Gabriel Arazas <foo.dogsquared@gmail.com>
2019-08-28
:stem: latexmath


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 stem:[\LaTeX] with the LaTeX symbol.

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

[stem]
++++
\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.

[source,latex]
----
This is a LaTeX sentence (or I guess in MathJax).
----

And it'll render as the following:

[stem]
++++
 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:

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

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

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

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


=== Reserved characters 

The following characters have special meaning to LaTeX.

```
# $ % ^ & _ { } ~ \
```

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

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.

[source,latex]
----
\# \$ \% \^ \& \_ \{ \} \~ \\
----

[stem]
++++
\# \$ \% \^{} \& \_ \{ \} \~{} \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{}`.

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

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


=== Boldface text

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

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

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


=== Italic text

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

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

[stem]
++++
\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.

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

[stem]
++++
\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.

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

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


=== More options

You can see a lot more options from https://en.wikibooks.org/wiki/LaTeX/Fonts[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.

[source,latex]
----
\frac{NUMERATOR}{DENOMINATOR}
----

For a bit of an example:

[source,latex]
----
\frac{x_1 + y_2}{x_2 + y_1}
----

[stem]
++++
\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. 

[source,latex]
----
\sqrt{2a + b}
----

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

Yes, you can nest some stuff.

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

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

You can specify an optional argument to change the magnitude. 

[source,latex]
----
\sqrt[\frac{1}{2}]{2a + b}
----

[stem]
++++
\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 (`{}`).

[source,latex]
----
2^2 * 2^{23} = 2^{25}
----

[stem]
++++
2^2 * 2^{23} = 2^{25}
++++

You can also nest it within a superscript like so. 

[source,latex]
----
2^{2^{10}} * 2^{23^2} = \infty
----

[stem]
++++
 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 (`{}`).

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

[stem]
++++
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).

[source,latex]
----
a_{2_{1}} + a_{2_{2}} = b_{2_{1}} + b_{2_{2}}
----

[stem]
++++
 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.

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

[stem]
++++
\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.

[source,latex]
----
\left(\frac{x^2}{y^3}\right)
----

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

Since curly braces have semantic meaning to stem:[\LaTeX], you need to 
escape it.
Pretty much, it'll look like this:

[source,latex]
----
\left\{\frac{x^2}{y^3}\right\}
----

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


=== A lot more!

You have a whole slew of mathematical symbols available. 
Please refer to 
https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols[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 
https://math-on-quora.surge.sh/[this web page that details using MathJax on Quora] 
by Gilles Castel. 
It is specifically made for writing stem:[\LaTeX] on Quora but it 
can be used as a general MathJax guide, anyways.