KaTex für HUGO und Blogdown

KaTex übersetzt die wichtigsten LaTex-Mathe-Notationen in HTML. Die Verwendung unterscheidet sich in Blogdown und HUGO.
LaTeX
Blogdown
ubuntuusers
Autor:in

Joe Slam

Veröffentlichungsdatum

22. Februar 2022

übersetzt die wichtigsten -Mathe-Notationen in HTML. Es ist dabei schneller als MathJax, hat im Gegenzug aber noch nicht (sooooo) viele Notationen umgesetzt wie der Platzhirsch. Zudem unterscheidet sich die Anwendung in Blogdown und HUGO.

KaTeX in HUGO einbinden

In meinem Themeordner erstelle ich die Datei /MEINTHEME/layouts/partials/katex.html und gebe ihr folgenden Inhalt:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.css" integrity="sha384-MlJdn/WNKDGXveldHDdyRP1R4CTHr3FeuDNfhsLPYrq2t0UBkUdK2jyTnXPEK1NQ" crossorigin="anonymous">

<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/katex.min.js" integrity="sha384-VQ8d8WVFw0yHhCk5E8I86oOhv48xLpnDZx5T9GogA/Y84DcCKWXDmSDfn13bzFZY" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.2/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "$$", right: "$$", display: true},
                {left: "$", right: "$", display: false}
            ]
        });
    });
</script>

Ihr solltet nachschauen, ob die Version 0.15.2 immer noch die aktuellste ist und ggfs. die Zeilen entsprechend anpassen.

In der Datei /MEINTHEME/layouts/partials/head.html ergänze ich:

 {{ if .Params.math }}{{ partial "katex.html" . }}{{ end }}

Wenn ich später in Blogdown bei einem Post im Meta-Kopf folgenden Paramter setze:

 math: true

…dann wird KaTeX geladen und kann verwendet werden. Die Informationen hierzu hab ich in Mert Bakirs Blog gefunden.


Beispiele

Die Anwendung unterscheidet sich, je nachdem, ob .md, .Rmarkdown oder .Rmd-Files verwendet werden.



.md

In einfachen Markdowndokumenten funktioniert die Inline-Verwendung mittels Dollarzeichen:

 Dies ist ein Text mit $E=m\cdot c^2$ 

Das ergibt:

Dies ist ein Text mit \(E=m\cdot c^2\)

Das funktioniert auch mit Sonderzeichen:

 Wir verwenden $\LaTeX \rightarrow \KaTeX$ und das klappt ganz gut

Das ergibt:

Wir verwenden \(\LaTeX \rightarrow \LaTeX\) und das klappt ganz gut

Mathe-Umgebungen werden mit zwei Dollarzeichen eingerahmt:

$$
E=m\cdot c^2
$$ 

Das ergibt:

\[ E=m\cdot c^2 \]

Mit dem align-Environment werden die Formelzeilen automatisch am rechten Rand durchnummeriert. Environments müssen nicht per Dollarzeichen eingeführt werden sondern funktioniert direkt im Text :

Dies ist eine Formel

\begin{align}
E=m\cdot c^2
\end{align}

und ich finde sie gut

Das ergibt:

Dies ist eine Formel \begin{align} E=mc^2 \end{align} und ich finde sie gut

So funktioniert auch das equation-Environment direkt im Text:

Einstein hat mal gesagt:

\begin{equation}
E=m\cdot c^2
\end{equation}

und ich glaube, er hatte Recht

Das ergibt:

Einstein hat mal gesagt:

\begin{equation} E=mc^2 \end{equation}

und ich glaube, er hatte Recht

Eine Übersicht aller unterstützer Environments findet ihr hier.



.Rmarkdown

In .Rmarkdown-Files ist die Notation leicht anders. So müssen bei der Inline-Verwendung die Dollarzeichen mittels Backslash auskommentiert werden:

 Dies ist ein Text mit \$a^2 + b^2 = c^2\$ 

Das ergibt:

Dies ist ein Text mit \(a^2 + b^2 = c^2\)

Das gilt auch für alle Sonderzeichen:

 Wir verwenden \$\\LaTeX \\rightarrow \\KaTeX\$ und das klappt ganz gut

Das ergibt:

Wir verwenden \(\LaTeX \rightarrow \LaTeX\) und das klappt ganz gut

Mathe-Umgebungen werden wie gewohnt mit zwei Dollarzeichen eingerahmt.

$$
a^2 + b^2 = c^2
$$ 

Das ergibt:

\[ a^2 + b^2 = c^2 \]

Auch hier müssen die Backslashs von Sonderzeichen auskommentiert werden:

$$
\\LaTeX \\rightarrow \\LaTeX
$$ 

Das ergibt: \[ \LaTeX \rightarrow \LaTeX \]

In .Rmarkdown-Files müssen bei allen Environments und Sonderzeichen die \ von \begin{} und \end{} auskommentiert werden, damit sie direkt im Text funktionieren. Für das align-Environment sieht das dann so aus:

Irgendwas mit Dreiecken
\\begin{align}
a^2 + b^2 = c^2
\\end{align}
Was war das noch?

Das ergibt:

Irgendwas mit Dreiecken \begin{align} a^2 + b^2 = c^2 \end{align} Was war das noch?


Genau so funktioniert auch das equation-Environment:

Pythagoras hat mal gesagt:

\\begin{equation}
a^2 + b^2 = c^2
\\end{equation}

und ich glaube, er hatte Recht

Das ergibt:

Pythagoras hat mal gesagt:

\begin{equation} a^2 + b^2 = c^2 \end{equation}

und ich glaube, er hatte Recht

Eine Übersicht aller unterstützer Environments findet ihr hier.



.Rmd

In .Rmd-Dokumenten funktioniert die Inline-Verwendung wieder mittels Dollarzeichen:

 Dies ist ein Text mit $\Reals \backsim 2^\N$ 

Das ergibt:

Dies ist ein Text mit \(\mathbb{R} \backsim 2^N\)

Das funktioniert auch mit Sonderzeichen:

 Wir verwenden $\LaTeX \rightarrow \KaTeX$ und das klappt ganz gut

Das ergibt:

Wir verwenden \(\LaTeX \rightarrow \LaTeX\) und das klappt ganz gut

Mathe-Umgebungen werden mit zwei Dollarzeichen eingerahmt:

$$
\Reals \backsim 2^\N
$$ 

Das ergibt:

\[ \mathbb{R} \backsim 2^N \]

Mit dem align-Environment werden die Formelzeilen automatisch am rechten Rand durchnummeriert. Environments müssen nicht mit Dollarzeichen eingerahmt werden, sondern funktionieren direkt im Text:

Was war das noch für eine Formel
\begin{align}
\Reals \backsim 2^\N
\end{align}
Und was bedeutet sie?

Das ergibt:

Was war das noch für eine Formel \begin{align} \mathbb{R} \backsim 2^N \end{align} Und was bedeutet sie?

Das equation-Environment funktioniert genau so:

Cantor hat mal gesagt:

\begin{equation}
\Reals \backsim 2^\N
\end{equation}

und ich glaube, er hatte Recht

Das ergibt:

Cantor hat mal gesagt: \[ \begin{align} \mathbb{R} \backsim 2^N \end{align} \] und ich glaube, er hatte Recht

Eine Übersicht aller unterstützer Environments findet ihr hier.



Allgemein

Zeilenumbrüche funktionieren per \newline, aber nicht mit \\:

\begin{align}
 E &= m \cdot c^2 \newline
 a^2 + b^2 &= c^2 \newline
 \Reals &\backsim 2^\N
\end{align}

Das ergibt:

\[ \begin{align} E &=m\cdot c^2 \newline a^2 + b^2 &= c^2 \newline \mathbb{R} &\backsim 2^N \end{align} \]

Das Prozentzeichen muss mit zwei Backslashs auskommentiert werden:

$$
14\\% + 15\\% = 29\\%
$$

Das ergibt: \[ 14\% + 15\% = 29\% \]