Math

The math shortcode renders complex 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

$$\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 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" .
  "align" "center"
  "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)$$"
)}}

You can also use pure Markdown for writing simple math expressions.

Passthrough syntax is only available by further configuration and has limited features as it does not provide any of the below parameters besides content. Nevertheless, it is widely available in other Markdown parsers like GitHub and therefore is the recommended syntax for generating portable Markdown.

Parameters

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

Settings

Providing Initialization Options for the MathJax Library

Option Front Matter The MathJax library is configured with default settings for initialization.

You can overwrite the settings by providing a JSON object in mathJaxInitialize. See MathJax’s documentation for all allowed settings.

Keep in mind that initialization settings of your pages front matter overwrite all settings of your configuration options.

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

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

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

Loading an External Version of the MathJax Library

Option Front Matter The theme uses the shipped MathJax library by default.

In case you want do use a different version of the MathJax library but don’t want to override the shipped version, you can set customMathJaxURL to the URL of the external MathJax library.

[params]
  customMathJaxURL = 'https://unpkg.com/mathjax/es5/tex-mml-chtml.js'

params:
  customMathJaxURL: https://unpkg.com/mathjax/es5/tex-mml-chtml.js

{
   "params": {
      "customMathJaxURL": "https://unpkg.com/mathjax/es5/tex-mml-chtml.js"
   }
}

Force Loading of the MathJax Library

Option Front Matter The MathJax library will be loaded if the page contains a math shortcode, Markdown codefence or the partial is called from your templates.

You can force loading the MathJax library if you are using Passthrough syntax by setting math=true. If a shortcode, Markdown codefence or partial was called, the option has no effect. This must be set in case you are using the Passthrough configuration to render math.

Instead of math=true you can also use the alias math.force=true.

[params]
  math = true

params:
  math: true

{
   "params": {
      "math": true
   }
}

Passthrough Configuration

You can use your math without enclosing it in a shortcode or Markdown codefence by using a Passthrough configuration

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 force load the MathJax library either in your hugo.toml or in your page’s front matter as the theme doesn’t know if math is used.

See the example on how a Passthrough configurations makes using math really easy.

Examples

Block Math

In Passthrough default configuration, block math is generated if you use two consecutive $$ as a delimiter around your formulae.

Anyways your formulae still needs to be enclosed by $ or $$ with any of the other available syntax as well.

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

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

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

{{ partial "shortcodes/math.html" (dict
  "page" .
  "content" "$$\\left|\n\\begin{array}{cc}\na & b \\\\\nc & d\n\\end{array}\\right|$$"
)}}

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

Inline Math

In Passthrough default configuration, inline math is generated if you use a single $ as a delimiter around your formulae.

Euclid already knew, $\sqrt{2}$ is irrational.

Euclid already knew, {{< math >}}$\sqrt{2}${{< /math >}} is irrational.

Euclid already knew, {{ partial "shortcodes/math.html" (dict
  "page" .
  "content" "$\\sqrt{2}$"
)}} is irrational.

Euclid already knew, $\sqrt{2}$ is irrational.

Block Math with Right Alignment

With Passthrough syntax, only the content parameter is available.

$$\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="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 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 >}}

{{ partial "shortcodes/math.html" (dict
  "page" .
  "align" "right"
  "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)$$"
)}}

$$\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)$$

Chemical Formulae

The MathJax library can also be used for chemical formulae.

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

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

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

{{ partial "shortcodes/math.html" (dict
  "page" .
  "content" "$$\\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$"
)}}

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