Math
If this is not enough, the math
shortcode helps you rendering math and chemical formulae using the MathJax library.
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" .
"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"
)}}
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 parameter. Nevertheless, it is widely available in other Markdown parsers like GitHub and therefore is the recommend syntax for generating portable Markdown.
Parameter
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.
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 }"
}
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.
customMathJaxURL = 'https://unpkg.com/mathjax/es5/tex-mml-chtml.js'
customMathJaxURL: https://unpkg.com/mathjax/es5/tex-mml-chtml.js
{
"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 or codefence.
You can force loading the MathJax library if no shortcode or codefence was used by setting math=true
. If a shortcode or codefence was found, 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
.
math = true
math: true
{
"math": true
}
Passthrough Configuration
You can use your math without enclosing it in a shortcode or codefence by using a passthrough configuration
[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
Passthrough Block Math
With passthrough configuration enabled you can just drop your math without enclosing it by shortcodes or codefences but no other parameters are available.
In this case you have to force load the MathJax library by setting math=true
either in your hugo.toml
or in your page’s front matter.
In passthrough default configuration, block math is generated if you use two consecutive $$
as a delimiter around your formulae.
$$\left|
\begin{array}{cc}
a & b \\
c & d
\end{array}\right|$$
Passthrough Inline Math
The same usage restrictions as of the previous example apply here as well.
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, $\sqrt{2}$ is irrational.
Codefence Block Math with Right Alignment
If you are using codefences, more parameter are available. Your formulae still needs to be enclosed by $
or $$
as delimiters respectively.
```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)$$
```
Shortcode Block Math with Right Alignment
You can also use shortcode syntax. Your formulae still needs to be enclosed by $
or $$
as delimiters respectively.
{{< 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 >}}
Chemical Formulae
The MathJax library can also be used for chemical formulae.
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$