--- 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 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.