Update KaTeX integration to setup recommended in Hugo 0.122

kirillbobyrev · Jan 28, 2024 · 778f735 · 778f735
1 parent daf96ae
commit 778f735
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 14 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -85,7 +85,7 @@ hr {
 pre:has(code), p>code {
   border: thin solid var(--muted);
   padding: .5rem;
-  border-radius: 0.5rem;
+  border-radius: 0.3rem;
   overflow-x: auto;
 }
 

diff --git a/exampleSite/content/features/extensions.md b/exampleSite/content/features/extensions.md
@@ -82,12 +82,14 @@ Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>
 
 If you want to use KaTeX-based math rendering in your posts, set `math = true`
 in the post front matter or in the site config. Then you can use LaTeX syntax to
-write math equations (`$$` for display mode, `$` for inline mode):
+write math equations (`$$` for display mode, `\(` and `\)` for inline mode):
 
 $$
 i \hbar \frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat H \Psi(\mathbf{r},t)
 $$
 
+And also \(x = 42\) for inline equations.
+
 ## Default Hugo shortcodes
 
 You can use all the [built-in Hugo

diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
@@ -15,3 +15,10 @@ themesDir = '../..'
     guessSyntax = true
     style = 'github'
     tabWidth = 2
+  [markup.goldmark]
+    [markup.goldmark.extensions]
+      [markup.goldmark.extensions.passthrough]
+        enable = true
+        [markup.goldmark.extensions.passthrough.delimiters]
+          block = [['\[', '\]'], ['$$', '$$']]
+          inline = [['\(', '\)']]
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -55,5 +55,5 @@
 {{ end }}
 
 {{ if or .Params.math site.Params.math }}
-{{ partial "math.html" . }}
+{{ partialCached "math.html" . }}
 {{ end }}
diff --git a/layouts/partials/math.html b/layouts/partials/math.html
@@ -1,11 +1,15 @@
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.css"
-  integrity="sha384-mXD7x5S50Ko38scHSnD4egvoExgMPbrseZorkbE49evAfv9nNcbrXJ8LLNsDgh9d" crossorigin="anonymous">
-
-<!-- The loading of KaTeX is deferred to speed up page rendering -->
-<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.6/dist/katex.min.js"
-  integrity="sha384-j/ZricySXBnNMJy9meJCtyXTKMhIJ42heyr7oAdxTDBy/CYA9hzpMo+YTNV5C+1X" 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.16.6/dist/contrib/auto-render.min.js"
-  integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
-  onload="renderMathInElement(document.body);"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    renderMathInElement(document.body, {
+      delimiters: [
+        {left: '\\[', right: '\\]', display: true},   // block
+        {left: '$$', right: '$$', display: true},     // block
+        {left: '\\(', right: '\\)', display: false},  // inline
+      ],
+      throwOnError : false
+    });
+  });
+</script>