Adjustments to the katex integration.

README.md

@@ -247,6 +247,7 @@ params:
   mainSections:             # The sections you want to have listed on the front page.
     - "section1"            # Default to the section with most content if not set.
     - "section2"            # Set to empty if no section should be listed.
+  math: true                # Turn on math typesetting with Katex, default false.
   menuInHeader: true        # Move the main menu to the header, default false.
   microUsername: ""         # Your micro.blog username.
   mobileMenu: true          # Turn on a mobile menu on small screens, default false.
@@ -793,6 +794,12 @@ Node.js software you need. To install them run:
         nmp run lint (project + theme)
 
 
+## Math typesetting with Katex
+
+Download the latest release from <https://github.com/KaTeX/KaTeX/releases>. Unpack and place the resulting "katex" directory in the root `assets/vendor` directory.
+
+The resulting path should be `assets/vendor/katex`. Then set the `math` param to true and write some math to be typeset.
+
 ## Getting help
 
 If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/frjo/hugo-theme-zen/tree/main/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132). Feel free to tag me in your question, my forum username is [@frjo](https://discourse.gohugo.io/u/frjo/summary).

assets/js/math.js

@@ -1,23 +0,0 @@
-/**
- * @file
- * A JavaScript file for render math with KaTex.
- */
-
-(function () {
-
-    'use strict';
-
-    document.addEventListener('DOMContentLoaded', function () {
-        renderMathInElement(document.body, {
-            // customised options
-            // • auto-render specific keys, e.g.:
-            delimiters: [{left: '$$', right: '$$', display: true}, {
-                left: '$',
-                right: '$',
-                display: false
-            }, {left: '\\(', right: '\\)', display: false}, {left: '\\[', right: '\\]', display: true}],
-            // • rendering keys, e.g.:
-            throwOnError: false
-        });
-    });
-})();

assets/vendor/katex/auto-render.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),i=i.default}()}));

exampleSite/config.yaml

@@ -40,4 +40,3 @@ params:
   realfavicongenerator: true
   sidebar: true
   submitted: true
-  math: true

layouts/_default/baseof.html

@@ -10,6 +10,7 @@
 {{ partial "meta_json_ld.html" . }}
 {{ partial "scripts.html" . }}
 {{ partialCached "tracking.html" . }}
+{{ if $.Param "math" }}{{ partial "math.html" . }}{{ end -}}
 </head>
 
 <body class="{{ if .IsPage }}single-page{{ else }}list-page{{ end }}{{ if .IsHome }} front{{ end }}{{ with $.Param "bodyclass" }} {{ . }}{{ end }}">
@@ -28,7 +29,6 @@
 {{ if $.Param "menuinheader" }}{{ partial "menu.html" . }}{{ end -}}
 </div>
 {{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}
-{{ if $.Param "math" }}{{ partial "math.html" . }}{{ end -}}
 </header>
 
 {{ if not ($.Param "menuinheader") }}{{ partial "menu.html" . }}{{ end -}}
@@ -43,8 +43,8 @@
 {{ with $.Param "footer" }}<p>{{ . | markdownify }}</p>{{ end }}
 {{ if $.Param "poweredby" }}<p>Powered by <a href="https://gohugo.io/">Hugo</a> and the <a href="https://github.com/frjo/hugo-theme-zen">Zen theme</a>.</p>{{ end }}
 </footer>
-{{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}}
 
+{{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}}
 </div>
 </body>
 </html>

layouts/partials/math.html

@@ -1,11 +1,6 @@
-{{ $katex_style := resources.Get "vendor/katex/katex.min.css" -}}
-<link rel="stylesheet" href="{{ $katex_style.RelPermalink }}" >
-
-{{ $katex := resources.Get "vendor/katex/katex.min.js" }}
-<script defer src="{{ $katex.RelPermalink }}" crossorigin="anonymous"></script>
-
-{{ $auto_render := resources.Get "vendor/katex/auto-render.min.js" }}
-<script defer src="{{ $auto_render.RelPermalink }}" crossorigin="anonymous"></script>
-
-{{ $customized_render := resources.Get "js/math.js" }}
-<script defer src="{{ $customized_render.RelPermalink }}" crossorigin="anonymous"></script>
+{{ $katex_style := resources.Get "vendor/katex/katex.min.css" | fingerprint -}}
+<link rel="stylesheet" href="{{ $katex_style.RelPermalink }}">
+{{ $katex := resources.Get "vendor/katex/katex.min.js" | fingerprint -}}
+<script defer src="{{ $katex.RelPermalink }}"></script>
+{{ $auto_render := resources.Get "vendor/katex/contrib/auto-render.min.js" | fingerprint -}}
+<script defer src="{{ $auto_render.RelPermalink }}" onload="renderMathInElement(document.body);"></script>