# MathJax guide for RPG.SE: How to format pretty tables and equations?

For a more exhaustive tutorial please see Math.SE's Mathjax quick reference which covers many more things than this post does. This is trying to focus on the formatting which is typically needed here, which is a lot less than a maths site does.

• How do I format good-looking equations?

• How do I format good-looking tables?

• related: MathJaX is live on RPGSE (which also has some examples, but not as well gathered/organized as this) – nitsua60 Jul 12 '20 at 13:32
• Relevant MSE post: Stack Exchange is rolling out native table support that isn't reliant on MathJax. It goes into testing today on MSE and on the DBA Meta, then rolls out to DBA.SE itself a week later, and will be available network-wide a week after that. It uses "GitHub-flavored Markdown" table syntax (since CommonMark doesn't include a specification for tables at the moment). – V2Blast Nov 24 '20 at 0:54

Note that MathJax will make a page slower to load and can be jarring if there's a lot of inline equations (note that typeface and size is different). For superscript in normal text, say for footnotes, use <sup></sup> and html codes for special characters, such as &dagger; for † and &times; for ×.

## Equations and Maths

First, a definition. MathJax lets us format things as $$\\LaTeX\$$ math-mode, which means maths looks good and text looks bad. (Different kerning and no spacing which makes it difficult to read.)

You can make in-line equations by enclosing in $..$ and on separate, centred lines by enclosing in $$..$$. So, for example $1+2=3$ renders as $$\1+2=3\$$ while $$1+2=3$$ renders as $$1+2=3$$

Super and subscript is achieved via ^ and _ respectivly. If these are to contain more than a single character, enclose them in {..}. Example: $M_{x, b}^n = x_b + n^3$ gives $$\M_{x, b}^n = x_b + n^3\$$

There a number functions for special characters and formatting. \times gives $$\\times\$$, $\sum$ gives $$\\sum\$$, and similarly for greek letters $\alpha$ gives $$\\alpha\$$ and common functions $\ln$ gives $$\\ln\$$

Fractions can be achieved using \frac{}{}. When putting a fraction in parenthesis use \left and \right on those to make then scale with the height of the fraction. Example with and without

$$\frac{1}{20} + (\frac{1}{20})^2 + \left(\frac{1}{20}\right)^2$$


$$\frac{1}{20} + (\frac{1}{20})^2 + \left(\frac{1}{20}\right)^2$$

If you have long equations you can the align environment to make it align over multiple lines. Use \\ to mark linebreaks and & to define anchors, ie. points which are to be aligned on the vertical. (Note the spacing sometimes can go weird around the & which should be fixable by injecting some empty brackets {})

\begin{align}
P &=  1 + 2 + 3 + 4 + 5 + \frac{3}{7} \\
&\approx  15.429
\end{align}


\begin{align} P &= 1 + 2 + 3 + 4 + 5 + \frac{3}{7} \\ &\approx 15.429 \end{align}

## Markdown Tables

In december 2020 we got support for markdown tables (Announcement post on main meta).

Cells are divided by | and the mandatory header is delineated by the row of dashes (--). Column alignment can be set by including colons in that row. Spacing and number of dashes is not critical (line breaks are), but can be useful to keep the markdown version readable. Below is an example table and the code producing it.

First row cell entry
Second row It is possible to include quite a lot of text in a cell, and it will wrap if needed.
| A header | Another header | Last Header |
| :------- | :------------: | ----------: |
| First    | row            | cell entry  |
| Second   | row            | It is possible to include quite a lot of text in a cell,
and it will wrap if needed.  |


## MathJax Tables

In order to make tables with MathJax we make use of the array environment. This has the side effect that it makes text look bad, unless we use the \text command. This makes it render like text, but note that MarkDown does not work inside such commands. You can use \textit and \textbf instead to make the text italicized or bold respectively.

Use \\ to end rows, and & to separate cells. You need a column definer at the start (otherwise your first character will be eaten). It defines how your columns will be justified (left, centered, or right) and you can use | to introduce vertical lines. Use \hline after a linebreak to make a horizontal line. Consider using as few lines as necessary to make the table readable. Column justification defaults to centered.

\begin{array}{r|lc}
\textbf{Number} & \textbf{Left Justified Text} & N_{i+1} \\ \hline
1 & Text in math mode           & 3\\
3 & \text{Text as normal text}  & 97 \\
13 & \textit{Text in italics}    & - \\
42 & \text{Text } \textbf{bolded} \text{ for effect}
\end{array}


$$\begin{array}{r|lc} \textbf{Number} & \textbf{Left Justified Text} & N_{i+1} \\ \hline 1 & Text in math mode & 3\\ 3 & \text{Text as normal text} & 97 \\ 13 & \textit{Text in italics} & - \\ 42 & \text{Text } \textbf{bolded} \text{ for effect} \end{array}$$

There are a number of webapps which let you generate Latex tables using a more visual front end. You will need to change tabular to array and put in \text functions as appropriate.

• If you align the = and the \approx in your align example (rather than aligning the first entity after them) you won't have that spacing problem and won't need the invisible brackets. I've gone ahead and done it in the LaTeX (but not the code version) so that you can see and decide if you want to edit. – nitsua60 Jul 12 '20 at 13:30
• @nitsua60 Huh.. Cheers! I left the note in about the brackets, because it is sometimes needed, depending on what you do with it. – Someone_Evil Jul 12 '20 at 20:21
• That's funny--I've literally never had to do that, nor seen that trick used. And tex.se is how I made my way to the Stack! As usual with (La)TeX, running across something new every time =) – nitsua60 Jul 12 '20 at 20:32