fix(katex): robust client-side fallback render — support $/85679, \(...\), \[...\]; auto-escape underscores in \text{...}; process more containers

Author: n-WN

static/js/katex_init.js

@@ -0,0 +1,98 @@
+// Initialize KaTeX auto-render on page content with CSP-friendly external script
+(function(){
+  function safeContainer(el){
+    return !(el.closest('pre, code'));
+  }
+  function tokenizeMath(text){
+    var tokens = [];
+    var i = 0;
+    var dels = [
+      {l:'$$', r:'$$', d:true},
+      {l:'\\[', r:'\\]', d:true},
+      {l:'\\(', r:'\\)', d:false},
+      {l:'$', r:'$', d:false},
+    ];
+    while (i < text.length){
+      // find earliest delimiter occurrence
+      var best = null, bestIdx = -1;
+      for (var di=0; di<dels.length; di++){
+        var idx = text.indexOf(dels[di].l, i);
+        if (idx !== -1 && (bestIdx === -1 || idx < bestIdx)) { best = dels[di]; bestIdx = idx; }
+      }
+      if (bestIdx === -1){
+        tokens.push({t:'t', s:text.slice(i)});
+        break;
+      }
+      if (bestIdx > i){ tokens.push({t:'t', s:text.slice(i, bestIdx)}); }
+      var start = bestIdx + best.l.length;
+      var end = text.indexOf(best.r, start);
+      if (end === -1){
+        // unmatched: treat as text
+        tokens.push({t:'t', s:text.slice(bestIdx)});
+        break;
+      }
+      var content = text.slice(start, end);
+      tokens.push({t:'m', d:best.d, s:content});
+      i = end + best.r.length;
+    }
+    return tokens;
+  }
+  function escapeUnderscoresInTextCommand(str){
+    return str.replace(/\\text\{([^}]*)\}/g, function(_, inner){
+      var out = '';
+      for (var i=0;i<inner.length;i++){
+        var ch = inner[i];
+        if (ch === '_' && (i===0 || inner[i-1] !== '\\')){ out += '\\\\_'; }
+        else { out += ch; }
+      }
+      return '\\\\text{' + out + '}';
+    });
+  }
+  function rebuildWithKatex(el){
+    if (!window.katex) return;
+    var txt = el.textContent;
+    if (!(/[\$]/.test(txt) || /\\\(|\\\)|\\\[|\\\]/.test(txt))) return;
+    var tokens = tokenizeMath(txt);
+    if (!tokens.some(function(x){return x.t==='m';})) return;
+    while (el.firstChild) el.removeChild(el.firstChild);
+    tokens.forEach(function(tok){
+      if (tok.t==='t'){
+        el.appendChild(document.createTextNode(tok.s));
+      } else if (tok.t==='m'){
+        var content = escapeUnderscoresInTextCommand(tok.s);
+        var span = document.createElement('span');
+        try { window.katex.render(content, span, {displayMode: tok.d}); } catch(_) { span.textContent = tok.s; }
+        el.appendChild(span);
+      }
+    });
+    el.setAttribute('data-katex-rebuilt','1');
+  }
+  function init(){
+    if (typeof renderMathInElement === 'function') {
+      try {
+        renderMathInElement(document.body, {
+          delimiters: [
+            {left: "$$", right: "$$", display: true},
+            {left: "\\(", right: "\\)", display: false},
+            {left: "\\[", right: "\\]", display: true}
+          ],
+          ignoredTags: ["script","noscript","style","textarea","pre","code","option"],
+        });
+      } catch (_) {}
+    }
+    if (window.katex) {
+      document.querySelectorAll('.math-katex').forEach(function(el){
+        try { window.katex.render(el.textContent, el, { displayMode: (el.dataset.display === 'true') }); } catch (_) {}
+      });
+      // Fallback fix: rebuild math in common containers, avoiding code blocks
+      document.querySelectorAll('.e-content.body p, .e-content.body li, .e-content.body h1, .e-content.body h2, .e-content.body h3, .e-content.body h4, .e-content.body blockquote, .e-content.body td, .e-content.body th, .e-content.body dd, .e-content.body dt, .e-content.body figcaption').forEach(function(el){
+        if (safeContainer(el) && el.getAttribute('data-katex-rebuilt') !== '1') rebuildWithKatex(el);
+      });
+    }
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

templates/tabi/extend_body.html

@@ -1,29 +1,5 @@
 {# Local KaTeX auto-render for standard delimiters and robust shortcode rendering #}
 {%- if macros_settings::evaluate_setting_priority(setting="katex", page=page | default(value=""), section=section | default(value=""), default_global_value=false) == "true" -%}
     <script defer src="{{ get_url(path='js/katex_autorender.min.js', trailing_slash=false) | safe }}"></script>
-    <script>
-    document.addEventListener("DOMContentLoaded", function() {
-        try {
-            if (typeof renderMathInElement === 'function') {
-                renderMathInElement(document.body, {
-                    delimiters: [
-                        {left: "$$", right: "$$", display: true},
-                        {left: "\\(", right: "\\)", display: false},
-                        {left: "\\[", right: "\\]", display: true}
-                    ],
-                    ignoredTags: ["script","noscript","style","textarea","pre","code","option"],
-                });
-            }
-        } catch (e) { /* no-op */ }
-
-        // Fallback: render shortcodes that avoid Markdown interference
-        if (window.katex) {
-            document.querySelectorAll('.math-katex').forEach(function(el){
-                try {
-                    window.katex.render(el.textContent, el, { displayMode: (el.dataset.display === 'true') });
-                } catch (e) { /* ignore parse errors */ }
-            });
-        }
-    });
-    </script>
+    <script defer src="{{ get_url(path='js/katex_init.js', trailing_slash=false) | safe }}"></script>
 {%- endif -%}