updated:  2024 05. February
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 Markdowndatei bereit gestellte Seitenparameter kann nunmehr abgefragt und die Bibliothek hinzugefügt werden.


 {{ 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 }}

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}

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}

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

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