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>:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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>

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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]: