KaTeX zusammen mit cactus.chat

Ich verwende in meinem Blog KaTeX (siehe hier) und cactus.chat (siehe hier), und beides für sich genommen funktioniert ganz gut. Ein Problem tritt dann auf, wenn KaTeX und cactus.chat gemeinsam verwendet werden.

Dann kann es passieren, dass KaTeX in dem <div>-Container von cactus.chat herumschreibt, was dazu führt, dass cactus.chat nur “Getting comments…” anzeigt, ohne diese jedoch wirklich zu laden und ohne die Chance, einen neuen Kommentar hinzuzufügen.

Die Lösung besteht darin zu verhindern, dass KaTeX den <div>-Container anfasst. Die lässt sich in 2 Schritten umsetzen…

1. cactus.chat einrahmen

Wir modifizieren /layouts/shortcodes/chat.html (siehe hier) und packen den cactus.chat-Abschnitt komplett in ein eigenes <div>:

# {{< highlight html "linenos=table,hl_lines=2 15,linenostart=1" >}}
<br>
<div class="no-katex-here">
<script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
<link rel="stylesheet" href="https://latest.cactus.chat/style.css" type="text/css">
<div id="comment-section"></div>
<script>
initComments({
  node: document.getElementById("comment-section"),
  defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
  serverName: "cactus.chat",
  siteName: "YOUR-SITE-NAME",
  commentSectionId: "{{ index .Params 0 }}"
})
</script>
</div>
#{{< / highlight >}}

In Zeile 2 beginnt unser Container mit der Klasse "no-katex-here", und in Zeile 15 endet er.

2. KaTeX anpassen

Man kann KaTeX anweisen, bestimmte Bereiche der Seite nicht anzufassen. Dies erfolgt entweder über den Parameter ignoredTags oder ignoredClasses (siehe KaTeX-Docs). Da wir oben im Cactus-Shortcode den <div>-Container der Klasse "no-katex-here" zugewiesen haben, bedienen wir uns der letzteren Option und übergeben ignoredClasses:['no-katex-here'] beim Funktionsaufruf.

Dafür muss die Datei /layouts/partials/katex.html (siehe hier) entsprechend angepasst werden.

<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,{ignoredClasses:['no-katex-here']});"></script>

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

In Zeile 7 und 12 haben wir den Funktionsaufruf um die Option ignoredClasses:['no-katex-here'] ergänzt.

Jetzt lässt KaTeX cactus.chat in Ruhe und beides funktioniert gemeinsam.

---

kommentiere per [matrix]: