♻️ Refactor: mathematical formula render (#609)

* ✨ Feat: add support for math passthrough render hook * ✨ Feat: enable copy-tex extension for KaTeX server-side render * ✨ Feat: enhance mathematical rendering support with KaTeX and MathJax configurations * ✨ Feat: add KaTeX error handling and custom macros map config * ✨ Feat: add MathJax client-side rendering as an alternative math engine * ✨ Feat: update MathJax CDN configuration and enhance asset loading parameters * 🔥 Feat: remove unused KaTeX math rendering scripts and update KaTex * ✨ Feat: make \KaTeX command work in MathJax * ✨ Feat: update KaTeX CDN links for Twikoo integration * ⚡ Perf: Math in content encryption * 🐛 Fix: update class name from 'fi-row' to 'fi-raw' in raw.html shortcode * 🐛 Fix: correct MathJax math delimiters in load-mathjax.js * ✨ Feat: enhance MathJax configuration with additional tex parameters and update asset handling * 🐛 Fix: adjust KaTeX display overflow behavior
2026-08-24 15:28:57 +00:00 · 2025-06-30 12:58:48 +08:00
parent a5614505bc
commit 0ce74d82f8
17 changed files with 190 additions and 83 deletions
@@ -496,7 +496,13 @@
    .katex-display {
      max-width: 100%;
      overflow-x: auto;
-      padding-block: 2px;
+      overflow-y: hidden;
+    }
+    .katex-error {
+      padding: 0.14em 0.28em;
+      background-color: mark;
+      cursor: help;
+      @include border-radius($global-border-radius);
    }

    @import '../_partials/_single/alert';
@@ -41,6 +41,7 @@ pre:not(.mermaid[data-processed='true']) {

 .highlight,
 .gist {
+  font-size: $code-block-font-size;
  font-family: $code-font-family;

  .table-wrapper {
@@ -39,12 +39,9 @@ libFiles:
  gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
  # instant.page@5.2.0 https://github.com/instantpage/instant.page
  instantPage: instant.page@5.2.0/instantpage.min.js
-  # katex@0.16.10 https://github.com/KaTeX/KaTeX
-  katexAutoRenderJS: katex@0.16.10/dist/contrib/auto-render.min.js
-  katexCopyTexJS: katex@0.16.10/dist/contrib/copy-tex.min.js
-  katexCSS: katex@0.16.10/dist/katex.min.css
-  katexJS: katex@0.16.10/dist/katex.min.js
-  katexMhchemJS: katex@0.16.10/dist/contrib/mhchem.min.js
+  # katex@0.16.22 https://github.com/KaTeX/KaTeX
+  katexCopyTexJS: katex@0.16.22/dist/contrib/copy-tex.min.js
+  katexCSS: katex@0.16.22/dist/katex.min.css
  # lightgallery@2.7.2 https://github.com/sachinchoolur/lightgallery
  lightgalleryCSS: lightgallery@2.7.2/css/lightgallery-bundle.min.css
  lightgalleryJS: lightgallery@2.7.2/lightgallery.min.js
@@ -39,12 +39,9 @@ libFiles:
  gitalkJS: gitalk@1.7.2/dist/gitalk.min.js
  # instant.page@5.2.0 https://github.com/instantpage/instant.page
  instantPage: instant.page@5.2.0/instantpage.js
-  # katex@0.16.10 https://github.com/KaTeX/KaTeX
-  katexAutoRenderJS: katex@0.16.10/dist/contrib/auto-render.min.js
-  katexCopyTexJS: katex@0.16.10/dist/contrib/copy-tex.min.js
-  katexCSS: katex@0.16.10/dist/katex.min.css
-  katexJS: katex@0.16.10/dist/katex.min.js
-  katexMhchemJS: katex@0.16.10/dist/contrib/mhchem.min.js
+  # katex@0.16.22 https://github.com/KaTeX/KaTeX
+  katexCopyTexJS: katex@0.16.22/dist/contrib/copy-tex.min.js
+  katexCSS: katex@0.16.22/dist/katex.min.css
  # lightgallery@2.7.2 https://github.com/sachinchoolur/lightgallery
  lightgalleryCSS: lightgallery@2.7.2/css/lightgallery-bundle.min.css
  lightgalleryJS: lightgallery@2.7.2/lightgallery.min.js
@@ -0,0 +1,45 @@
+import * as params from '@params'
+
+/**
+ * Load MathJax script dynamically
+ */
+function loadMathJax() {
+  const script = document.createElement('script')
+  script.src = params.cdn || 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'
+  script.async = true
+  document.head.appendChild(script)
+}
+
+/**
+ * Configuring MathJax
+ * https://docs.mathjax.org/en/latest/options/index.html
+ */
+window.MathJax = {
+  tex: {
+    displayMath: [['\\[', '\\]'], ['$$', '$$']],
+    inlineMath: [['\\(', '\\)'], ['$', '$']],
+    packages: {
+      ...params.packages,
+    },
+    // custom macros
+    macros: {
+      // make \KaTeX command work in MathJax
+      KaTeX: '{K\\kern-.325em\\raise.21em{\\scriptstyle{A}}\\kern-.17em\\TeX}',
+      ...params.macros,
+    },
+    ...params.tex,
+  },
+  loader: {
+    ...params.loader,
+    failed: function (error) {
+      console.error(`MathJax(${error.package || '?'}): ${error.message}`);
+    },
+  },
+  options: {
+    ignoreHtmlClass: 'comment',
+    processHtmlClass: 'content',
+    ...params.options,
+  }
+}
+
+loadMathJax()
@@ -636,12 +636,6 @@ class FixIt {
    }
  }

-  initMath(target = document.body) {
-    if (this.config.math) {
-      renderMathInElement(target, this.config.math);
-    }
-  }
-
  initMermaid() {
    if (!this.config.mermaid) {
      return;
@@ -1100,6 +1094,10 @@ class FixIt {
    pangu.autoSpacingPage();
  }

+  initMathJax() {
+    window.MathJax?.typeset && window.MathJax.typeset();
+  }
+
  initFixItDecryptor() {
    this.decryptor = new FixItDecryptor({
      decrypted: () => {
@@ -1108,7 +1106,6 @@ class FixIt {
        this.initLightGallery();
        this.initCodeWrapper();
        this.initTable();
-        this.initMath();
        this.initMermaid();
        this.initEcharts();
        this.initTypeit();
@@ -1117,6 +1114,7 @@ class FixIt {
        this.initToc();
        this.initTocListener();
        this.initPangu();
+        this.initMathJax();
        this.util.forEach(document.querySelectorAll('.encrypted-hidden'), ($element) => {
          $element.classList.replace('encrypted-hidden', 'decrypted-shown');
        });
@@ -1127,12 +1125,12 @@ class FixIt {
        this.initLightGallery();
        this.initCodeWrapper();
        this.initTable($content);
-        this.initMath($content);
        this.initMermaid();
        this.initEcharts();
        this.initTypeit($content);
        this.initMapbox();
        this.initPangu();
+        this.initMathJax();
        this.util.forEach($content.querySelectorAll('.encrypted-hidden'), ($element) => {
          $element.classList.replace('encrypted-hidden', 'decrypted-shown');
        });
@@ -1328,7 +1326,6 @@ class FixIt {
        this.initLightGallery();
        this.initCodeWrapper();
        this.initTable();
-        this.initMath();
        this.initMermaid();
        this.initEcharts();
        this.initTypeit();
@@ -13,7 +13,7 @@ fontawesome-free@6.7.1 https://github.com/FortAwesome/Font-Awesome
 fusejs@6.6.2 https://github.com/krisk/fuse
 gitalk@1.7.2 https://github.com/gitalk/gitalk
 instant.page@5.2.0 https://github.com/instantpage/instant.page
-katex@0.16.10 https://github.com/KaTeX/KaTeX
+katex@0.16.22 https://github.com/KaTeX/KaTeX
 lightgallery@2.7.2 https://github.com/sachinchoolur/lightgallery
 mapbox-gl@2.10.0 https://github.com/mapbox/mapbox-gl-js
 meting@2.0.1 https://github.com/metowolf/MetingJS
@@ -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}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){r.d(o,{default:function(){return d}});var e=r(771),t=r.n(e);const n=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},i=/^\\begin{/;var a=function(e,t){let r;const o=[],a=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&"))).join("|")+")");for(;r=e.search(a),-1!==r;){r>0&&(o.push({type:"text",data:e.slice(0,r)}),e=e.slice(r));const a=t.findIndex((t=>e.startsWith(t.left)));if(r=n(t[a].right,e,t[a].left.length),-1===r)break;const l=e.slice(0,r+t[a].right.length),s=i.test(l)?l:e.slice(t[a].left.length,r);o.push({type:"math",data:s,rawData:l,display:t[a].display}),e=e.slice(r+t[a].right.length)}return""!==e&&o.push({type:"text",data:e}),o};const l=function(e,n){const r=a(e,n.delimiters);if(1===r.length&&"text"===r[0].type)return null;const o=document.createDocumentFragment();for(let e=0;e<r.length;e++)if("text"===r[e].type)o.appendChild(document.createTextNode(r[e].data));else{const i=document.createElement("span");let a=r[e].data;n.displayMode=r[e].display;try{n.preProcess&&(a=n.preProcess(a)),t().render(a,i,n)}catch(i){if(!(i instanceof t().ParseError))throw i;n.errorCallback("KaTeX auto-render: Failed to parse `"+r[e].data+"` with ",i),o.appendChild(document.createTextNode(r[e].rawData));continue}o.appendChild(i)}return o},s=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const s=l(o,t);if(s){for(let e=0;e<a;e++)r.nextSibling.remove();n+=s.childNodes.length-1,e.replaceChild(s,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&s(r,t)}}};var d=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.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}],n.ignoredTags=n.ignoredTags||["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses||[],n.errorCallback=n.errorCallback||console.error,n.macros=n.macros||{},s(e,n)}}(),o=o.default}()}));
@@ -180,13 +180,12 @@ mainSections = []
          enable = true
        [markup.goldmark.extensions.extras.superscript]
          enable = true
-    # TODO passthrough refactor https://gohugo.io/render-hooks/passthrough/
-    # TODO hugo 0.122.0 https://gohugo.io/content-management/mathematics/
-    # [markup.goldmark.extensions.passthrough]
-    #   enable = true
-    #   [markup.goldmark.extensions.passthrough.delimiters]
-    #     block = [['\[', '\]'], ['$$', '$$']]
-    #     inline = [['\(', '\)'], ['$', '$']]
+      # https://gohugo.io/content-management/mathematics/
+      [markup.goldmark.extensions.passthrough]
+        enable = true
+        [markup.goldmark.extensions.passthrough.delimiters]
+          block = [['\[', '\]'], ['$$', '$$']]
+          inline = [['\(', '\)'], ['$', '$']]
    [markup.goldmark.parser]
      [markup.goldmark.parser.attribute]
        block = true
@@ -1081,19 +1080,41 @@ mainSections = []
          h4 = "{h2}.{h3}.{h4} {title}"
          h5 = "{h2}.{h3}.{h4}.{h5} {title}"
          h6 = "{h2}.{h3}.{h4}.{h5}.{h6} {title}"
-    # FixIt 0.2.16 | CHANGED KaTeX mathematical formulas (https://katex.org)
+    # FixIt 0.4.0 | CHANGED mathematical formulas configation
+    # See http://fixit.lruihao.cn/documentation/content-management/markdown-syntax/extended/#formula
    [params.page.math]
      enable = true
-      # default inline delimiter is $ ... $ and \( ... \)
-      inlineLeftDelimiter = ""
-      inlineRightDelimiter = ""
-      # default block delimiter is $$ ... $$, \[ ... \], \begin{equation} ... \end{equation} and some other functions
-      blockLeftDelimiter = ""
-      blockRightDelimiter = ""
-      # KaTeX extension copy_tex
-      copyTex = true
-      # KaTeX extension mhchem
-      mhchem = true
+      # mathematical formulas rendering engines, optional values: ["katex", "mathjax"]
+      type = "katex"
+      # KaTeX server-side rendering (https://katex.org)
+      # KaTeX partial config: https://gohugo.io/functions/transform/tomath/#options
+      [params.page.math.katex]
+        # KaTeX extension copy-tex
+        copyTex = true
+        throwOnError = false
+        errorColor = "#ff4949"
+        # custom macros map
+        # syntax: <macro> = <definition>
+        [params.page.math.katex.macros]
+          # "\\f" = "#1f(#2)"   # usage: $\f{a}{b}$
+      # MathJax server-side rendering (https://www.mathjax.org)
+      # MathJax config: https://docs.mathjax.org/en/latest/options/index.html
+      [params.page.math.mathjax]
+        cdn = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+        [params.page.math.mathjax.packages]
+          # "[+]" = ["configmacros"]
+        # custom macros map
+        # syntax: <macro> = <definition>
+        [params.page.math.mathjax.macros]
+          # "bold" = ["{\\bf #1}", 1]   # usage: $\bold{math}$
+        [params.page.math.mathjax.loader]
+          load = ["ui/safe"]
+          [params.page.math.mathjax.loader.paths]
+            # custom = "https://cdn.jsdelivr.net/gh/sonoisa/XyJax-v3@3.0.1/build/"
+          # more loader config e.g source, dependencies, provides etc.
+        [params.page.math.mathjax.options]
+          enableMenu = true
+          # more options config e.g. skipHtmlTags, ignoreHtmlClass etc.
    # Code wrapper config
    [params.page.code]
      # FixIt 0.3.9 | NEW whether to enable the code wrapper
@@ -0,0 +1,45 @@
+{{- $params := .Page.Params | merge site.Params.page -}}
+{{- $math := $params.math -}}
+{{- if eq $math true -}}
+  {{- $math = dict "enable" true | merge site.Params.page.math -}}
+{{- else if eq $math false -}}
+  {{- $math = dict "enable" false -}}
+{{- end -}}
+
+{{- /* 
+  Mathematical formulas rendering:
+    - KaTeX server-side rendering
+    - MathJax client-side rendering
+  Regular passthrough rendering:
+    - [todo] support more features in future
+*/ -}}
+{{- if $math.enable -}}
+  {{- if eq $math.type "katex" -}}
+    {{- $katex := $math.katex -}}
+    {{- $opts := dict "output" "htmlAndMathml" "displayMode" (eq $.Type "block") }}
+    {{- $opts = dict "throwOnError" $katex.throwOnError "errorColor" $katex.errorColor | merge $opts }}
+    {{- $macros := $katex.macros | default dict -}}
+    {{- if $macros -}}
+      {{- $opts = dict "macros" $macros | merge $opts -}}
+    {{- end -}}
+    {{- /* render mathematical markup to HTML */ -}}
+    {{- with try (transform.ToMath .Inner $opts) }}
+      {{- with .Err }}
+        {{- errorf "Unable to render mathematical markup to HTML using the transform.ToMath function. The KaTeX display engine threw the following error: %s: see %s." . $.Position }}
+      {{- else }}
+        {{- .Value }}
+        {{- $.Page.Store.Set "hasKaTeX" true -}}
+      {{- end }}
+    {{- end -}}
+  {{- else if eq $math.type "mathjax" -}}
+    {{- if eq $.Type "block" -}}
+      $${{- .Inner -}}$$
+    {{- else -}}
+      ${{ .Inner }}$
+    {{- end -}}
+  {{- end -}}
+{{- else -}}
+  {{- /* Regular passthrough rendering */ -}}
+  {{- /* waiting for Hugo interface to get delimiters */ -}}
+  {{- .Inner -}}
+{{- end -}}
@@ -89,40 +89,42 @@
  {{- $config = dict "speed" $typeit.speed "cursorSpeed" $typeit.cursorSpeed "cursorChar" $typeit.cursorChar "duration" $typeit.duration "loop" $typeit.loop | dict "typeit" | merge $config -}}
 {{- end -}}

-{{- /* KaTeX */ -}}
-{{- $math := .Scratch.Get "math" -}}
+{{- /* Mathematical formulas */ -}}
+{{- $math := .Store.Get "math" -}}
 {{- if $math.enable -}}
-  {{- $source := $cdn.katexCSS | default "lib/katex/katex.min.css" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Preload" true | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
-  {{- $source := $cdn.katexJS | default "lib/katex/katex.min.js" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-  {{- $source := $cdn.katexAutoRenderJS | default "lib/katex/auto-render.min.js" -}}
-  {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-  {{- if $math.copyTex -}}
-    {{- $source := $cdn.katexCopyTexJS | default "lib/katex/copy-tex.min.js" -}}
-    {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+  {{- /* KaTeX */ -}}
+  {{- if (eq $math.type "katex") | and (.Store.Get "hasKaTeX") -}}
+    {{- $source := $cdn.katexCSS | default "lib/katex/katex.min.css" -}}
+    {{- dict "Source" $source "Fingerprint" $fingerprint "Preload" true | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
+    {{- /* Copy-tex extension */ -}}
+    {{- if $math.katex.copyTex -}}
+      {{- $source := $cdn.katexCopyTexJS | default "lib/katex/copy-tex.min.js" -}}
+      {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+    {{- end -}}
  {{- end -}}
-  {{- if $math.mhchem -}}
-    {{- $source := $cdn.katexMhchemJS | default "lib/katex/mhchem.min.js" -}}
-    {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
+
+  {{- /* MathJax */ -}}
+  {{- if eq $math.type "mathjax" -}}
+    {{/*  TODO improve MathJax setup. e.g. content encryption, Twikoo math etc.  */}}
+    {{- $mathjax := $math.mathjax -}}
+    {{- $source := "js/lib/load-mathjax.js" -}}
+    {{- $options := dict "targetPath" "js/lib/load-mathjax.min.js" "minify" hugo.IsProduction -}}
+    {{- $mathjaxOpts := $mathjax.options | default dict -}}
+    {{- $mathjaxOpts = dict "enableMenu" $mathjaxOpts.enablemenu | merge $mathjaxOpts -}}
+    {{- $params := dict
+      "cdn" $mathjax.cdn
+      "tex" ($mathjax.tex | default dict)
+      "packages" ($mathjax.packages | default dict)
+      "macros" ($mathjax.macros | default dict)
+      "loader" ($mathjax.loader | default dict)
+      "options" $mathjaxOpts
+    -}}
+    {{- $options = dict "params" $params | merge $options -}}
+    {{- if not hugo.IsProduction -}}
+      {{- $options = dict "sourceMap" "external" | merge $options -}}
+    {{- end -}}
+    {{- dict "Source" $source "Build" $options "Fingerprint" $fingerprint "Async" true "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
  {{- end -}}
-  {{- $delimiters := slice (dict "left" "$$" "right" "$$" "display" true) (dict "left" "\\[" "right" "\\]" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{equation}" "right" "\\end{equation}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{equation*}" "right" "\\end{equation*}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{align}" "right" "\\end{align}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{align*}" "right" "\\end{align*}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{alignat}" "right" "\\end{alignat}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{alignat*}" "right" "\\end{alignat*}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{gather}" "right" "\\end{gather}" "display" true) -}}
-  {{- $delimiters = $delimiters | append (dict "left" "\\begin{CD}" "right" "\\end{CD}" "display" true) -}}
-  {{- if and $math.blockLeftDelimiter $math.blockRightDelimiter -}}
-    {{- $delimiters = $delimiters | append (dict "left" $math.blockLeftDelimiter "right" $math.blockRightDelimiter "display" true) -}}
-  {{- end -}}
-  {{- $delimiters = $delimiters | append (dict "left" "$" "right" "$" "display" false) (dict "left" "\\(" "right" "\\)" "display" false) -}}
-  {{- if and $math.inlineLeftDelimiter $math.inlineRightDelimiter -}}
-    {{- $delimiters = $delimiters | append (dict "left" $math.inlineRightDelimiter "right" $math.inlineRightDelimiter "display" false) -}}
-  {{- end -}}
-  {{- $config = dict "strict" false "delimiters" $delimiters | dict "math" | merge $config -}}
 {{- end -}}

 {{- /* mermaid */ -}}
@@ -24,7 +24,7 @@
 {{- else if eq $math false -}}
  {{- $math = dict "enable" false -}}
 {{- end -}}
-{{- .Scratch.Set "math" $math -}}
+{{- .Store.Set "math" $math -}}

 {{- /*  SiteTime config patch  */ -}}
 {{- $siteTime := dict "Animate" true "Icon" "fa-solid fa-heartbeat" -}}
@@ -347,13 +347,12 @@
    {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
  {{- end -}}
  {{- /* KaTeX for Twikoo */ -}}
-  {{- $math := .Scratch.Get "math" -}}
-  {{- if not $math.enable | and $twikoo.enable | and $twikoo.katex -}}
-    {{- $source := $cdn.katexCSS | default "lib/katex/katex.min.css" -}}
+  {{- if $twikoo.enable | and $twikoo.katex -}}
+    {{- $source := "https://cdn.jsdelivr.net/npm//katex@0.16.22/dist/katex.min.css" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
-    {{- $source := $cdn.katexJS | default "lib/katex/katex.min.js" -}}
+    {{- $source := "https://cdn.jsdelivr.net/npm//katex@0.16.22/dist/katex.min.js" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-    {{- $source := $cdn.katexAutoRenderJS | default "lib/katex/auto-render.min.js" -}}
+    {{- $source := "https://cdn.jsdelivr.net/npm//katex@0.16.22/dist/contrib/auto-render.min.js" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
  {{- end -}}
 {{- end -}}
@@ -1,3 +1,3 @@

 {{- $tag := .Get "tag" | default (.Get 0) | default "div" -}}
-{{- printf `<%v class="fi-row">%v</%v>` $tag .Inner $tag | safeHTML -}}
+{{- printf `<%v class="fi-raw">%v</%v>` $tag .Inner $tag | safeHTML -}}
				`@@ -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}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var o={};return function(){r.d(o,{default:function(){return d}});var e=r(771),t=r.n(e);const n=function(e,t,n){let r=n,o=0;const i=e.length;for(;r<t.length;){const n=t[r];if(o<=0&&t.slice(r,r+i)===e)return r;"\\"===n?r++:"{"===n?o++:"}"===n&&o--,r++}return-1},i=/^\\begin{/;var a=function(e,t){let r;const o=[],a=new RegExp("("+t.map((e=>e.left.replace(/[-/\\^$*+?.()\|[\]{}]/g,"\\$&"))).join("\|")+")");for(;r=e.search(a),-1!==r;){r>0&&(o.push({type:"text",data:e.slice(0,r)}),e=e.slice(r));const a=t.findIndex((t=>e.startsWith(t.left)));if(r=n(t[a].right,e,t[a].left.length),-1===r)break;const l=e.slice(0,r+t[a].right.length),s=i.test(l)?l:e.slice(t[a].left.length,r);o.push({type:"math",data:s,rawData:l,display:t[a].display}),e=e.slice(r+t[a].right.length)}return""!==e&&o.push({type:"text",data:e}),o};const l=function(e,n){const r=a(e,n.delimiters);if(1===r.length&&"text"===r[0].type)return null;const o=document.createDocumentFragment();for(let e=0;e<r.length;e++)if("text"===r[e].type)o.appendChild(document.createTextNode(r[e].data));else{const i=document.createElement("span");let a=r[e].data;n.displayMode=r[e].display;try{n.preProcess&&(a=n.preProcess(a)),t().render(a,i,n)}catch(i){if(!(i instanceof t().ParseError))throw i;n.errorCallback("KaTeX auto-render: Failed to parse `"+r[e].data+"` with ",i),o.appendChild(document.createTextNode(r[e].rawData));continue}o.appendChild(i)}return o},s=function(e,t){for(let n=0;n<e.childNodes.length;n++){const r=e.childNodes[n];if(3===r.nodeType){let o=r.textContent,i=r.nextSibling,a=0;for(;i&&i.nodeType===Node.TEXT_NODE;)o+=i.textContent,i=i.nextSibling,a++;const s=l(o,t);if(s){for(let e=0;e<a;e++)r.nextSibling.remove();n+=s.childNodes.length-1,e.replaceChild(s,r)}else n+=a}else if(1===r.nodeType){const e=" "+r.className+" ";-1===t.ignoredTags.indexOf(r.nodeName.toLowerCase())&&t.ignoredClasses.every((t=>-1===e.indexOf(" "+t+" ")))&&s(r,t)}}};var d=function(e,t){if(!e)throw new Error("No element provided to render");const n={};for(const e in t)t.hasOwnProperty(e)&&(n[e]=t[e]);n.delimiters=n.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}],n.ignoredTags=n.ignoredTags\|\|["script","noscript","style","textarea","pre","code","option"],n.ignoredClasses=n.ignoredClasses\|\|[],n.errorCallback=n.errorCallback\|\|console.error,n.macros=n.macros\|\|{},s(e,n)}}(),o=o.default}()}));