Math

The math shortcode generates beautiful formatted math and chemical formulae using the MathJax library.

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Usage

While the examples are using shortcodes with named parameter it is recommended to use codefences instead. This is because more and more other software supports Math codefences (eg. GitHub) and so your markdown becomes more portable.

You are free to also call this shortcode from your own partials.

Math is also usable without enclosing it in a shortcode or codefence but requires configuration by you. In this case no parameter from the below table are available.

```math { align="center" }
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
```

{{< math align="center" >}}
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
{{< /math >}}

{{ partial "shortcodes/math.html" (dict
  "page"    .
  "content" "$$left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$"
  "align"   "center"
)}}

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Parameter

Name	Default	Notes
align	`center`	Allowed values are `left`, `center` or `right`.
<content>	<empty>	Your formulae.

Configuration

MathJax is configured with default settings but you can customize MathJax’s default settings for all of your files through a JSON object in your hugo.toml or override these settings per page through your pages frontmatter.

The JSON object of your hugo.toml / frontmatter is forwarded into MathJax’s configuration object.

See MathJax documentation for all allowed settings.

Global Configuration File

This example reflects the default configuration also used if you don’t define mathJaxInitialize

hugo.

[params]
  mathJaxInitialize = '{ "tex": { "inlineMath": [["\(", "\)"], ["$", "$"]], displayMath: [["\[", "\]"], ["$$", "$$"]] }, "options": { "enableMenu": false }'

params:
  mathJaxInitialize: '{ "tex": { "inlineMath": [["\(", "\)"], ["$", "$"]], displayMath:
    [["\[", "\]"], ["$$", "$$"]] }, "options": { "enableMenu": false }'

{
   "params": {
      "mathJaxInitialize": "{ \"tex\": { \"inlineMath\": [[\"\\(\", \"\\)\"], [\"$\", \"$\"]], displayMath: [[\"\\[\", \"\\]\"], [\"$$\", \"$$\"]] }, \"options\": { \"enableMenu\": false }"
   }
}

Page’s Frontmatter

Usually you don’t need to redefine the global initialization settings for a single page. But if you do, you have repeat all the values from your global configuration you want to keep for a single page as well.

Eg. If you have redefined the delimiters to something exotic like @ symbols in your global config, but want to additionally align your math to the left for a specific page, you have to put this to your frontmatter:

+++
mathJaxInitialize = '{ "chtml": { "displayAlign": "left" }, { "tex": { "inlineMath": [["\(", "\)"], ["@", "@"]], displayMath: [["\[", "\]"], ["@@", "@@"]] }, "options": { "enableMenu": false }'
+++

---
mathJaxInitialize: '{ "chtml": { "displayAlign": "left" }, { "tex": { "inlineMath":
  [["\(", "\)"], ["@", "@"]], displayMath: [["\[", "\]"], ["@@", "@@"]] }, "options":
  { "enableMenu": false }'
---

{
   "mathJaxInitialize": "{ \"chtml\": { \"displayAlign\": \"left\" }, { \"tex\": { \"inlineMath\": [[\"\\(\", \"\\)\"], [\"@\", \"@\"]], displayMath: [[\"\\[\", \"\\]\"], [\"@@\", \"@@\"]] }, \"options\": { \"enableMenu\": false }"
}

Passthrough Configuration

You can use your math without enclosing it in a shortcode or codefence by using a passthrough configuration in your hugo.toml:

hugo.

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      [markup.goldmark.extensions.passthrough]
        enable = true

        [markup.goldmark.extensions.passthrough.delimiters]
          block = [['\[', '\]'], ['$$', '$$']]
          inline = [['\(', '\)'], ['$', '$']]

markup:
  goldmark:
    extensions:
      passthrough:
        delimiters:
          block:
          - - \[
            - \]
          - - $$
            - $$
          inline:
          - - \(
            - \)
          - - $
            - $
        enable: true

{
   "markup": {
      "goldmark": {
         "extensions": {
            "passthrough": {
               "delimiters": {
                  "block": [
                     [
                        "\\[",
                        "\\]"
                     ],
                     [
                        "$$",
                        "$$"
                     ]
                  ],
                  "inline": [
                     [
                        "\\(",
                        "\\)"
                     ],
                     [
                        "$",
                        "$"
                     ]
                  ]
               },
               "enable": true
            }
         }
      }
   }
}

In this case you have to tell the theme that your page contains math by setting this in your page’s frontmatter:

+++
disableMathJax = false
+++

---
disableMathJax: false
---

{
   "disableMathJax": false
}

See the example on how it makes using math really easy.

Examples

Inline Math

Inline math is generated if you use a single `$` as a delimiter around your formulae: {{< math >}}$\sqrt{3}${{< /math >}}

Inline math is generated if you use a single $ as a delimiter around your formulae: $\sqrt{3}$

Blocklevel Math with Right Alignment

If you delimit your formulae by two consecutive `$$` it generates a new block.

{{< math align="right" >}}
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
{{< /math >}}

If you delimit your formulae by two consecutive $$ it generates a new block.

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Codefence

You can also use codefences.

```math
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
```

$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$

Passthrough

This works for block as well as inline math but is only available if you are using the passthrough configuration.

With passthrough configuration you can just drop your math without enclosed by shortcodes or codefences but no settings from the parameter table are available.

$$\left|
\begin{array}{cc}
a & b \\
c & d
\end{array}\right|$$

$$\left| \begin{array}{cc} a & b \\ c & d \end{array}\right|$$

Chemical Formulae

{{< math >}}
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
{{< /math >}}

$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$