Migration MathJax 3.1.2 to MathJax v.4

25 views
Skip to first unread message

akhil joshi

unread,
Nov 18, 2025, 2:23:37 AMNov 18
to MathJax Users

Hi Team,

Currently, we are using the CDN for MathJax v3.1.2
https://cdn.jsdelivr.net/npm/mat...@3.1.2/es5/tex-mml-chtml.js
to render MathJax HTML.

In this version, the rendered structure includes the predefined <math></math> tags.


image.png

  However, when we switch to MathJax v4 using the CDN below:
https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js,
the <math> tag is no longer included in the rendered output. The structure we receive in v4 differs from v3.  

  private async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
    return new Promise<void>((resolve, reject) => {
      const script: HTMLScriptElement = document.createElement("script");
      script.id = config.id;
      script.type = "text/javascript";
      script.src = config.source;
  //   script.integrity = config.integrity;
      script.crossOrigin = "anonymous";
      script.async = true;
      script.onload = () => resolve();
      script.onerror = error => reject(error);
      document.head.appendChild(script);
    });
  }

image.png

 Could you please confirm if there are any configuration-level changes required for this behavior in v4?
Additionally, please let me know if any technical implementation updates are needed to support MathJax v4.  

private async registerMathJaxAsync(config: MathJaxConfig): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    if (document.getElementById(config.id)) {
      console.warn('MathJax script already loaded');
      resolve();
      return;
    }

    // ✅ Enhanced MathJax v4 configuration to preserve MathML
    (window as any).MathJax = {
      startup: {
        elements: null, // Process all math elements automatically
        // pageReady() {
        //   // Preserve original math elements before processing
        //   const mathElements = document.querySelectorAll('math');
        //   mathElements.forEach((math: Element) => {
        //     // Store original MathML as data attribute
        //     const mathml = math.outerHTML;
        //     math.setAttribute('data-original-mathml', mathml);
           
        //     // Create a hidden copy for restoration
        //     if (!math.nextElementSibling || !math.nextElementSibling.classList.contains('original-math')) {
        //       const clone = math.cloneNode(true) as HTMLElement;
        //       clone.classList.add('original-math');
        //       clone.style.display = 'none';
        //       clone.style.position = 'absolute';
        //       clone.style.left = '-9999px';
        //       math.parentNode?.insertBefore(clone, math.nextSibling);
        //     }
        //   });
         
        //   return (window as any).MathJax.startup.defaultPageReady();
        // }
      },
      options: {
        enableAssistiveMml: true,
        renderActions: {
          // This helps preserve accessibility MathML
          addMenu: [0, '', '']
        }
      },
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']]
      },
      svg: {
        // Better preservation of source
        fontCache: 'global'
      }
    };

    const script = document.createElement('script');
    script.id = config.id;
    script.type = 'text/javascript';
    script.src = config.source;
    script.crossOrigin = 'anonymous';
    script.defer = true;

    script.onload = () => {
      if (window.MathJax && window.MathJax.startup?.promise) {
        window.MathJax.startup.promise.then(() => resolve());
      } else {
        resolve();
      }
    };

    script.onerror = (error) => {
      console.error('Failed to load MathJax script', error);
      reject(error);
    };

    document.head.appendChild(script);
  });
}





Thanks & Regards,
Akhil Joshi 

Davide Cervone

unread,
Nov 18, 2025, 8:03:36 AMNov 18
to mathja...@googlegroups.com
Try changing

       enableAssistiveMml: true,

in the options block of your configuration with

menuOptions: {
  settings: {
    speech: false,
    braille: false,
    assistiveMml: true,
  }
}

(still in the options block).  When the MathJax contextual menu is in use, its settings override the main "enable..." settings.

Davide



--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/mathjax-users/88d22751-acce-422a-974e-9fd91c6a67can%40googlegroups.com.

Reply all
Reply to author
Forward
0 new messages