Why Aren't Dollar-Sign Inline Math Delimiters Rendering Correctly in MathJax 3?

Below is an explanation of what’s likely going on and some steps you can take to resolve it.

---

What’s Happening

Even though your configuration tells MathJax to treat both dollar-sign delimiters and ( ) as inline math, the dollar-sign version isn’t being processed in the same way as the ( ) version. When you inspect the DOM, you see:

• Dollars: <span class="math math-inline">…</span>
• Backslashes: <span class="MathJax CtxtMenu_Attached_0">…</span>

This indicates that the dollar-sign inline math is being intercepted or handled by something else—often the Markdown processor (in your case, pulldown_cmark) or additional preprocessing—before MathJax can reprocess it.

---

Possible Causes

1. Markdown Preprocessing
   The Markdown converter may be wrapping inline math inside its own span tags (with class="math math-inline") so that MathJax doesn’t “see” the original dollar delimiters. This can happen if pulldown_cmark is trying to do its own math handling or if it isn’t configured to leave the math intact.

2. Delimiter Escaping in the Configuration
   The MathJax config requires that backslashes are properly escaped in JS strings. In your configuration shown in HTML, you have

   JSCopied
   inlineMath: [['$', '$'], ['\(', '\)']]

   but for JavaScript (or inline scripts) you need to escape the backslashes so that they reach MathJax correctly. The documented suggestion is:

   JSCopied
   inlineMath: [['$', '$'], ['\\(', '\\)']]

   While your ( ) version appears to work, it might be due to the way the HTML parsing is handling the escapes; ensuring consistent escaping helps avoid any subtle issues.

---

Steps to Resolve

1. Double Check Your Delimiter Escaping
   Update your inline math configuration to make sure the delimiters are correctly escaped. For example:

   HTMLCopied
   <script>
       MathJax = {
           tex: {
               inlineMath: [['$', '$'], ['\\(', '\\)']]
           },
           svg: {
               fontCache: 'global'
           }
       };
   </script>
   <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script>

2. Examine Your Markdown Conversion
   Check whether pulldown_cmark is interfering with or altering inline math delimiters. If it’s automatically converting $…$ math into <span class="math math-inline">…</span>, MathJax might not recognize these spans for reprocessing. One or more of the following approaches might help:

   • Disable or adjust markdown math processing: If pulldown_cmark has an option to disable its own math handling, turn that off so that dollar-sign math remains unaltered.
   • Post-process the output: Once the Markdown is rendered, run MathJax.typeset(); to reprocess any math delimiters that might be inside non-standard elements.
   • Use explicit delimiters: Consider switching to only ( ) delimiters for inline math if that’s more reliably processed (or at least use them as a test case).

3. Verify the Processing Order
   Make sure that MathJax is running after all of the Markdown conversion is complete. If the page loads with math already processed by Markdown, MathJax might not pick it up automatically.

---

Summary

• Update your config to use double backslashes for ( ) delimiters.
• Review and adjust how your Markdown converter handles inline dollar math.
• Ensure MathJax runs after the Markdown conversion is complete, and if necessary, call MathJax.typeset() to reprocess the document.

Following these steps should help MathJax recognize the dollar-delimited math in the same way it does for ( )-delimited math.