# Using ASCIIMath and MathJax

This page tests and documents using MathJax, Latex and AsciiMath with Hugo and markdown.

## Getting a Markdown Processor to Ignore Markup

MathJax, AsciiMath, and similar processors use special markup characters in the the html file. Often these characters overlap with markdown’s markup, and the markdown processor will mess things up. There are a number of options:

Use the

`\`

backslash, which is markdown’s escape character, to escape characters that would be processed by markdown. See Escaping Characters in markdownCreate a simple hugo shortcode which does nothing but pass through text verbatim, bypassing the markdown processor. Here’s an example of AsciiMath using the

`in`

(for inline) shortcode:`{{<in>}}` r_t = l_t - (2 * l_s)/(2pi) `{{</in>}}`

- renders as `sum_(i=1)^n i^3=((n(n+1))/2)^2` inline.
- By the way, to make this example, I had resort to using
`/* */`

to comment out the shortcode invocation in order to display this example. See Escaping Hugo Shortcodes for for more details on this, and other tricks to prevent markup from getting executed.

## AsciiMath

AsciiMath is rendered by the MathJAX libraries. By default, AsciiMath uses a “backtick” as it’s delimiter, and it only supports inline rendering. Note that backticks used in the html web page that also renders AsciiMath may mess up the rendering, as AsciiMath will see it as the delimiter of an equation… be careful

### Examples

Use backticks and raw AsciiMath. The following

`\` r_t = l_t - (2 * l_s)/(2pi) \``

- renders as ` r_t = l_t - (2 * l_s)/(2pi) ` inline.

Or you can use the

`in`

shortcode:`{{<in>}}`sum_(i=1)^n i^3=((n(n+1))/2)^2`{{</in>}}`

- renders as `sum_(i=1)^n i^3=((n(n+1))/2)^2` inline.

Create an inline

`am`

shortcode:`{{<am math="sum_(i=1)^n i^3=((n(n+1))/2)^2">}}`

- renders as ` sum_(i=1)^n i^3=((n(n+1))/2)^2 ` inline

Create a block

`AsciiMath`

shortcode.`{{< AsciiMath math="r_c = r_t - (sin(theta_l) * h_c)" comment="This is a comment" caption="This is a caption" >}}`

- renders as:

- Note that the shortcode takes an optional comment and caption.

## \(\LaTeX \) and MathJax

See the MathJax documentation for details.

By default, the MathJax TeX processor uses the LaTeX math delimiters, which are `\(...\)`

for in-line math, and `\[...\]`

for displayed equations. It also recognizes the TeX delimiters `$$...$$`

for displayed equations.

### Examples

Inline math example:

`\\( x = \frac{-b \pm \sqrt{c^2 - 4ac}}{2a} \\)`

- Renders as \( x = \frac{-b \pm \sqrt{c^2 - 4ac}}{2a} \). Note when \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\)
- You could also use the
`in`

shortcode as above.

Create an

`mj`

shortcode:`{{<mj math="x = \frac{-b \pm \sqrt{c^2 - 4ac}}{2a}">}}`

- renders as \( x = \frac{-b \pm \sqrt{c^2 - 4ac}}{2a} \)

Block example:

`\\[ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} \\]`

- Renders as: \[ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} \] .

Create a

`MathJax`

shortcode`{{<MathJax math="\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}" caption="This is a caption">}}`

- Renders as:

## \(\LaTeX\) Rendering

Since MathJax uses \(\LaTeX\), the same delimiters may be used to render any Latex markup.