Mathématique dans Hugo

2024-02-10 Hugo
Temps de lecture: 1 minutes.

Cet article fait partie de la série: Hugo

Table des matières

Dans la version v0.122.0, on peut facilement ajouter le support des formules mathématiques façon LaTex. Ce tutoriel est juste une retranscription de cette page.

$$E=mc^2$$

Installation:

Modification du ficher de configuration du blog.

config.toml

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

Ajout de d’une page partial

layouts/partials/math.html

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
  MathJax = {
    tex: {
      displayMath: [['\\[', '\\]'], ['$$', '$$']],  // block
      inlineMath: [['\\(', '\\)']]                  // inline
    }
  };
</script>

On active le partial si math est activé dans config.

layouts/_default/baseof.html

...
  {{ if .Param "math" }}
    {{ partialCached "math.html" . }}
  {{ end }}
...

Utilisation simple

$$ a^*=x-b^* $$

$$ a^*=x-b^* $$

$$ \frac{1}{2}$, $\left(-\frac{1}{2}\right)^n $$

$$ \frac{1}{2}\left(-\frac{1}{2}\right)^n $$

Utilisation complexe

$$\begin{align}
{V} & = \int_{-r}^{r} \pi(r^2-h^2) \mathrm{d}h \\[2ex]
& = \left[ \pi(hr^2-\tfrac{1}{3}h^3) \right]_{-r}^{r} \\[2ex]
& = \pi \left(r^3-\tfrac{1}{3}r^3 \right) - \pi \left(-r^3-\tfrac{1}{3}r^3 \right) \\[2ex]
& = \tfrac{2}{3} \pi r^3 + \tfrac{2}{3} \pi r^3 \\[2ex]
{V} & = \tfrac{4}{3} \pi r^3
\end{align}$$

$$\begin{align} {V} & = \int_{-r}^{r} \pi(r^2-h^2) \mathrm{d}h \\[2ex] & = \left[ \pi(hr^2-\tfrac{1}{3}h^3) \right]_{-r}^{r} \\[2ex] & = \pi \left(r^3-\tfrac{1}{3}r^3 \right) - \pi \left(-r^3-\tfrac{1}{3}r^3 \right) \\[2ex] & = \tfrac{2}{3} \pi r^3 + \tfrac{2}{3} \pi r^3 \\[2ex] {V} & = \tfrac{4}{3} \pi r^3 \end{align}$$