1 files changed, 14 insertions, 15 deletions
diff --git a/web_src/js/markup/math.ts b/web_src/js/markup/math.ts
index 4777805e3c..bc118137a1 100644
--- a/web_src/js/markup/math.ts
+++ b/web_src/js/markup/math.ts
@@ -1,4 +1,5 @@
 import {displayError} from './common.ts';
+import {queryElems} from '../utils/dom.ts';
 
 function targetElement(el: Element): {target: Element, displayAsBlock: boolean} {
   // The target element is either the parent "code block with loading indicator", or itself
@@ -11,27 +12,25 @@ function targetElement(el: Element): {target: Element, displayAsBlock: boolean}
   };
 }
 
-export async function renderMath(): Promise<void> {
-  const els = document.querySelectorAll('.markup code.language-math');
-  if (!els.length) return;
+export async function initMarkupCodeMath(elMarkup: HTMLElement): Promise<void> {
+  // .markup code.language-math'
+  queryElems(elMarkup, 'code.language-math', async (el) => {
+    const [{default: katex}] = await Promise.all([
+      import(/* webpackChunkName: "katex" */'katex'),
+      import(/* webpackChunkName: "katex" */'katex/dist/katex.css'),
+    ]);
 
-  const [{default: katex}] = await Promise.all([
-    import(/* webpackChunkName: "katex" */'katex'),
-    import(/* webpackChunkName: "katex" */'katex/dist/katex.css'),
-  ]);
+    const MAX_CHARS = 1000;
+    const MAX_SIZE = 25;
+    const MAX_EXPAND = 1000;
 
-  const MAX_CHARS = 1000;
-  const MAX_SIZE = 25;
-  const MAX_EXPAND = 1000;
-
-  for (const el of els) {
     const {target, displayAsBlock} = targetElement(el);
-    if (target.hasAttribute('data-render-done')) continue;
+    if (target.hasAttribute('data-render-done')) return;
     const source = el.textContent;
 
     if (source.length > MAX_CHARS) {
       displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`));
-      continue;
+      return;
     }
     try {
       const tempEl = document.createElement(displayAsBlock ? 'p' : 'span');
@@ -44,5 +43,5 @@ export async function renderMath(): Promise<void> {
     } catch (error) {
       displayError(target, error);
     }
-  }
+  });
 }