Tweak katex options (#21828)

- Render directly into DOM, skipping string conversion
- Add limiting options to prevent excessive size/macros
- Remove invalid `display` option previously passed

Ref: https://katex.org/docs/options.html

Co-authored-by: John Olheiser <john.olheiser@gmail.com>

1 files changed, 6 insertions, 4 deletions

diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js
index 5790a327a5..d4e40d5be2 100644
--- a/web_src/js/markup/math.js
+++ b/web_src/js/markup/math.js
@@ -23,12 +23,14 @@ export async function renderMath() {
 
   for (const el of els) {
     const source = el.textContent;
-    const options = {display: el.classList.contains('display')};
+    const nodeName = el.classList.contains('display') ? 'p' : 'span';
 
     try {
-      const markup = katex.renderToString(source, options);
-      const tempEl = document.createElement(options.display ? 'p' : 'span');
-      tempEl.innerHTML = markup;
+      const tempEl = document.createElement(nodeName);
+      katex.render(source, tempEl, {
+        maxSize: 25,
+        maxExpand: 50,
+      });
       targetElement(el).replaceWith(tempEl);
     } catch (error) {
       displayError(el, error);