updated:  2026 30. April
published:  2020 09. September

Mathematische Formeln in gohugo

Rendern von Formeln mit mathjax.

Vorwort

Für die Umwandlung von vereinfachten Markdowntext in eine mathematische HTML-Formel wird eine externe Online-Bibliothek (z.B. mathjax ) benötigt. Die Verwendung ist frei unter der Apache Lizenz Version 2.0 verfügbar.

Formeln mit LaTeX

Seit der Hugoversion 0.122.0 verfügt der statische Webgenerator über die in LaTeX verwendete Standardsyntax für mathematische Formeln in Markdown. Im Prinzip das Gleiche wie hier beschrieben, nur mit einem anderen Weg.

Die mathjax Engine

Bibliothek einbinden

Als erstes muss die mathjax-Bibliothek als Javascript in der Datei ./layouts/partials/header.html eingebunden werden. Damit steht die Bibliothek jeder gerenderten Seite des Projekts zur Verfügung.

   
 <!-- mathjax Version 2.7.5 mit Subresourceintegritätstest -->
 <script async
         src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"  
         integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" 
         crossorigin="anonymous">
 </script>


 <!-- mathjax Version 2.7.9 ohne Integritätstest -->
 <script async
         src="https://cdn.jsdelivr.net/npm/mathjax@2.7.9/MathJax.js?config=TeX-MML-AM_CHTML">
 </script>


 <!-- mathjax Version 3.0.0 mit Subresourceintegritätstest -->
 <script async
        src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-chtml.js"
        integrity="sha256-3Fdoa5wQb+JYfEmTpQHx9sc/GuwpfC/0R9EpBki+mf8=" 
        crossorigin="anonymous">
 </script>


 <!-- mathjax Version 3.1.2 ohne Integritätstest -->
 <script async 
         src="https://cdn.jsdelivr.net/npm/mathjax@3.1.2/es5/tex-chtml-full.js">
 </script>

Um nur einzelnen Seiten mit der Bibliothek zu erfreuen, kann im Kopf der Markdowndatei ein Schalter gesetzt werden. Der Schalter kann auch mit weiteren Parametern belegt werden.

 +++
 ...
 ...
 [mathjax]
     scale = 0.5
     align = "left"
     autonumber = "all"
 +++
   

 +++
 ...
 ...
 mathjax = "true"
 +++

Der in der Markdown-Datei definierte Seitenparameter ist nun abrufbar, und die Bibliothek wird der HTML-Seite hinzugefügt.


 {{ if .Page.Params.mathjax  }} 
    <script async 
            src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"  
            integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" 
            crossorigin="anonymous">
    </script>
 {{ end }}

Prüfung der Subressourcenintegrität (SRI)

Für einen Subressourcenintegritätstest (Parameter integrity und crossorigin) wird der Hash-Wert der mathjax-Skript Datei benötigt.


 curl -s https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js | openssl dgst -sha256 -binary | openssl base64 -A
 # Ergebnis:
 # nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=

 curl -s https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js | openssl dgst -sha512 -binary | openssl base64 -A
 # Ergebnis:
 # 0doc9hKxR3PYwso42RD1p5ySZpzzuDiOwMrdCEh2WdJZCjcmFKc/wEnL+z8fBQrnHoiNWbo+3fiGkOYXBdQp4A==

Dürfen es ein paar Optionen sein?

Optional wird die Darstellung mit ein paar Parametern gesteuert. Dabei gibt es unterschiede zwischen den Optionen der mathjax-Versionen 2.7 und 3.1 .


 <!-- mit Parameterabfrage und -übergabe aus der Markdowndatei -->
 {{- if .Page.Params.mathjax  -}}
    <script async
            src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-chtml.js"
            integrity="sha256-3Fdoa5wQb+JYfEmTpQHx9sc/GuwpfC/0R9EpBki+mf8=" 
            crossorigin="anonymous">
    </script>
    <script>
            MathJax = {
                      chtml: {
                              scale:        {{ .Page.Param "mathjax.scale" }},
                              displayAlign: {{ .Page.Param "mathjax.align" }},
                      },
                      tex: {
                              tags:         {{ .Page.Param "mathjax.cnumb" }},	 
                      },
            };
    </script>
 {{- end -}}
   

   
 <!-- Version 2.7 ist anders -->
 {{- if .Page.Params.mathjax  -}}
    <script async
            src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"  
            integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" 
            crossorigin="anonymous">
            MathJax.Hub.Config({
                   CommonHTML: {	
                      scale: 90,
                      linebreaks: { automatic: true },
                      mtextFontInherit: true,
                   },
                   TeX: { 
                      equationNumbers: { autoNumber: "AMS" } //fuer fortlaufende Nummerierung der Formel bei LateX
                   },
            };
    </script>
 {{- end -}}

Anwendungsbeispiele


 $$ evidence\_{i}=\sum\_{j}W\_{ij}x\_{j}+b\_{i} $$
So sieht’s dann aus:

$$ evidence_{i}=\sum_{j}W_{ij}x_{j}+b_{i} $$


 \\[3 < 4\\]
 \\[alpha =1 \\]
 $$\alpha = 1 $$
So sieht’s dann aus:

\[3 < 4\] \[alpha =1 \] $$\alpha = 1 $$


 \begin{align}
	p(v_i=1|\mathbf{h}) & = \\
	\sigma\left(\sum_j w_{ij}h_j + b_i\right)
 \end{align}
So sieht’s dann aus:

\begin{align} p(v_i=1|\mathbf{h}) & = \ \sigma\left(\sum_j w_{ij}h_j + b_i\right) \end{align}


 $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
So sieht’s dann aus:

$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$


 $$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$
So sieht’s dann aus:

$$C_p[\ce{H2O(l)}] = \pu{75.3 J // mol K}$$


 $$ E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i $$
So sieht’s dann aus:

$$ E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i $$


 \begin{equation}
 \bcancel{
  E_{\color{green}Grünland} \color{black} = 
  \frac{ Fläche\ (m^2) \cdot \color{green}Grünlandzahl}{\color{black}100 }
 }
 \end{equation}
So sieht’s dann aus:

\begin{equation} \bcancel{ E_{\color{green}Grünland} \color{black} = \frac{ Fläche\ (m^2) \cdot \color{green}Grünlandzahl}{\color{black}100 } } \end{equation}

# Beispiel Abstand des Exponend

$$ {Exponendenabstand}\^2 $$

$$ {Exponendenabstand}\mkern4mu^2 $$

$$ {Exponendenabstand}\mkern8mu^2 $$
So sieht’s dann aus:

$$ {Exponendenabstand}^2 $$

$$ {Exponendenabstand}\mkern4mu^2 $$

$$ {Exponendenabstand}\mkern8mu^2 $$

Weitere Beispiele: siehe im Html-Seitenquelltext \begin{aligned} \begin{pmatrix} q_{0} \\\ q_{1} \\\ q_{2} \end{pmatrix} = \begin{pmatrix} a_{00} & a_{01} & a_{02} \\\ a_{10} & a_{11} & a_{12} \\\ a_{20} & a_{21} & a_{22} \end{pmatrix} \end{aligned}

\begin{align} \dot{x} & = \sigma(y-x) \nonumber \\\ \dot{y} & = \rho x - y - xz \\\ \dot{z} & = -\beta z + xy \nonumber \end{align}

Umsetzungsproblem Hugo Markdown to Mathjax

\begin{align} y &= x4 + 4 \nonumber \\\ &= (x2+2)2 -4x2 \\\ &\le&(x^2+2)^2 \nonumber \end{align}

du nochmal schauen mußt

\begin{equation} \begin{aligned} & \frac{dy}{dt} = f(t, y) \ & y(t_0) = y_0 \end{aligned} \end{equation}

\begin{aligned} \int I(t) , dt \end{aligned}

\begin{aligned} \mathrm{UndTextmitK\ddot{a}segeht~auch.} \end{aligned}

\begin{aligned} \mathsf{Undauchserifenloser~Text.} \end{aligned}

\begin{aligned} \mathsf{\pi \approx 3{,}141592\ldots} \end{aligned}

\begin{aligned} \circ \frac{\qquad}{\qquad} \bullet \nonumber \end{aligned}

\begin{array}{c|c|c|} a & b & S\\\hline 1 & 0 & 1\\\ 1 & 1 & 0\nonumber \end{array}

\begin{array}{c|c|c|} a & b & S\\\hline 1 & 1 & 0 \end{array}

\begin{align} \mathsf{BeispielefürTrennlinien.}\nonumber\\\ \mathrm{——–Type1——————-\nonumber} \end{align} $$——–Type2———————–\nonumber$$

Weitere Beispiele und interaktiven Demos .
Einen kleinen Überblick gibt’s hier und noch mehr da .

Stichworte (tags)