From de9ba5be5e73661549ef326b78f359c11ead6a17 Mon Sep 17 00:00:00 2001
From: Andrew Scholer <ascholer@chemeketa.edu>
Date: Fri, 3 Apr 2026 12:22:35 -0700
Subject: [PATCH 1/4] HTML: add MathJax 4 configuration module (PR #2180)

---
 js/mathjax_startup.js | 156 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 156 insertions(+)
 create mode 100644 js/mathjax_startup.js

diff --git a/js/mathjax_startup.js b/js/mathjax_startup.js
new file mode 100644
index 000000000..d253ab0f4
--- /dev/null
+++ b/js/mathjax_startup.js
@@ -0,0 +1,156 @@
+/***************************************************************
+ * Implements startup of MathJax v4
+ ***************************************************************/
+
+// Base config options. Will be supplemented by optional parts later
+let mathJaxOpts = {
+  "tex": {
+    "inlineMath": [
+      [
+        "\\(",
+        "\\)"
+      ]
+    ],
+    "tags": "none",
+    "tagSide": "right",
+    "tagIndent": ".8em",
+    "packages": {
+      "[+]": [
+        "base",
+        "ams",
+        "amscd",
+        "color",
+        "newcommand",
+        "knowl"
+      ]
+    }
+  },
+  "options": {
+    "ignoreHtmlClass": "tex2jax_ignore|ignore-math",
+    "processHtmlClass": "process-math",
+  },
+  "chtml": {
+    "scale": 0.98,
+    "mtextInheritFont": true
+  },
+  "loader": {
+    "load": [
+      //"ui/lazy", // Vastly speeds up time to visible content. But breaks embedded knowl parsing
+      "input/asciimath",
+      //"[tex]/extpfeil",  //remove backwards compatibility?
+      "[tex]/amscd",
+      "[tex]/color",
+      "[tex]/newcommand",
+    ],
+    "paths": {
+      "pretext": "_static/pretext/js/lib"
+    }
+  }
+};
+
+
+export function startMathJax(opts) {
+  if(opts.hasWebworkReps || opts.hasSage) {
+    mathJaxOpts['renderActions'] = {
+      "findScript": [
+        10,
+        function (doc) {
+          document.querySelectorAll('script[type^="math/tex"]').forEach(function (node) {
+            var display = !!node.type.match(/; *mode=display/);
+            var math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
+            var text = document.createTextNode('');
+            node.parentNode.replaceChild(text, node);
+            math.start = { node: text, delim: '', n: 0 };
+            math.end = { node: text, delim: '', n: 0 };
+            doc.math.push(math);
+          });
+        },
+        ""
+      ]
+    }
+  }
+
+  if(opts.isReact) {
+    mathJaxOpts['startup'] = {
+      typeset: false,
+    }
+  } else {
+    mathJaxOpts['startup'] = {
+      ready() {
+        const { Configuration } = MathJax._.input.tex.Configuration;
+        const configuration = Configuration.create("knowl", {
+          handler: {
+            macro: ["knowl"]
+          }
+        });
+
+        function GetArgumentMML(parser, name) {
+          const NodeUtil = MathJax._.input.tex.NodeUtil.default;
+          const arg = parser.ParseArg(name);
+          if (!NodeUtil.isInferred(arg)) {
+            return arg;
+          }
+          const children = NodeUtil.getChildren(arg);
+          if (children.length === 1) {
+            return children[0];
+          }
+          const mrow = parser.create("node", "mrow");
+          NodeUtil.copyChildren(arg, mrow);
+          NodeUtil.copyAttributes(arg, mrow);
+          return mrow;
+        };
+
+        let mathjaxKnowl = {};
+        /**
+         * Implements \knowl{url}{math}
+         * @param {TexParser} parser The calling parser.
+         * @param {string} name The TeX string
+         */
+        mathjaxKnowl.Knowl = function (parser, name) {
+          const url = parser.GetArgument(name);
+          const arg = GetArgumentMML(parser, name);
+          const mrow = parser.create("node", "mrow", [arg], { tabindex: '0', "data-knowl": url });
+          parser.Push(mrow);
+        };
+
+        const CommandMap = MathJax._.input.tex.TokenMap.CommandMap;
+        new CommandMap(
+          "knowl",
+          {
+            knowl: ["Knowl"]
+          },
+          mathjaxKnowl
+        );
+
+        MathJax.startup.defaultReady();
+      },
+      pageReady() {
+        return MathJax.startup.defaultPageReady().then(function () {
+          rsMathReady();
+        }
+        )
+      },
+    }
+  }
+
+  if(opts.htmlPresentation) {
+    mathJaxOpts['options']['menuOptions'] = {
+      "settings": {
+        "zoom": "Click",
+        "zscale": "300%"
+      }
+    }
+  }
+
+  // Apply the options
+  window.MathJax = mathJaxOpts;
+
+  // Lets Runestone know that MathJax is ready
+  const runestoneMathReady = new Promise((resolve) => window.rsMathReady = resolve);
+  window.runestoneMathReady = runestoneMathReady;
+}
+
+
+
+
+

From fd8e444f62440a888ac51c8fbc9a8171f95ab63f Mon Sep 17 00:00:00 2001
From: Rob Beezer <beezer@ups.edu>
Date: Sat, 4 Apr 2026 09:22:32 -0700
Subject: [PATCH 2/4] HTML: switch to MathJax 4 for browser rendering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 js/mathjax_startup.js     |  11 +--
 xsl/pretext-html.xsl      | 154 +++++---------------------------------
 xsl/pretext-runestone.xsl |   2 +-
 3 files changed, 19 insertions(+), 148 deletions(-)

diff --git a/js/mathjax_startup.js b/js/mathjax_startup.js
index d253ab0f4..cc686cb43 100644
--- a/js/mathjax_startup.js
+++ b/js/mathjax_startup.js
@@ -35,16 +35,11 @@ let mathJaxOpts = {
   },
   "loader": {
     "load": [
-      //"ui/lazy", // Vastly speeds up time to visible content. But breaks embedded knowl parsing
       "input/asciimath",
-      //"[tex]/extpfeil",  //remove backwards compatibility?
       "[tex]/amscd",
       "[tex]/color",
       "[tex]/newcommand",
-    ],
-    "paths": {
-      "pretext": "_static/pretext/js/lib"
-    }
+    ]
   }
 };
 
@@ -150,7 +145,3 @@ export function startMathJax(opts) {
   window.runestoneMathReady = runestoneMathReady;
 }
 
-
-
-
-
diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl
index de8ab29a5..92e53e951 100644
--- a/xsl/pretext-html.xsl
+++ b/xsl/pretext-html.xsl
@@ -13163,152 +13163,32 @@ TODO:
 <!-- Autobold extension is critical for captions (bold'ed) that -->
 <!-- have mathematics in them (suggested by P. Krautzberger)    -->
 <xsl:template name="mathjax">
-    <!-- mathjax configuration -->
-    <xsl:element name="script">
-        <xsl:text>&#xa;</xsl:text>
-        <xsl:text>var runestoneMathReady = new Promise((resolve) => window.rsMathReady = resolve);&#xa;</xsl:text>
-        <xsl:text>window.MathJax = </xsl:text>
-        <xsl:call-template name="json">
-            <xsl:with-param name="content">
-                <map xmlns="http://www.w3.org/2005/xpath-functions">
-                    <map key="tex">
-                        <array key="inlineMath">
-                            <array>
-                                <string>\(</string>
-                                <string>\)</string>
-                            </array>
-                        </array>
-                        <string key="tags">none</string>
-                        <string key="tagSide">right</string>
-                        <string key="tagIndent">.8em</string>
-                        <map key="packages">
-                            <array key="[+]">
-                                <string>base</string>
-                                <string>ams</string>
-                                <string>amscd</string>
-                                <string>color</string>
-                                <string>newcommand</string>
-                                <!-- necessary for \text{} in math -->
-                                <string>textmacros</string>
-                                <string>knowl</string>
-                            </array>
-                        </map>
-                    </map>
-                    <map key="options">
-                        <string key="ignoreHtmlClass">tex2jax_ignore|ignore-math</string>
-                        <string key="processHtmlClass">process-math</string>
-                        <xsl:if test="$b-has-webwork-reps or $b-has-sage">
-                            <map key="renderActions">
-                                <array key="findScript">
-                                    <number>10</number>
-                                    <raw>
-                                        <xsl:text>function (doc) {&#xa;</xsl:text>
-                                        <xsl:text>            document.querySelectorAll('script[type^="math/tex"]').forEach(function(node) {&#xa;</xsl:text>
-                                        <xsl:text>                var display = !!node.type.match(/; *mode=display/);&#xa;</xsl:text>
-                                        <xsl:text>                var math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);&#xa;</xsl:text>
-                                        <xsl:text>                var text = document.createTextNode('');&#xa;</xsl:text>
-                                        <xsl:text>                node.parentNode.replaceChild(text, node);&#xa;</xsl:text>
-                                        <xsl:text>                math.start = {node: text, delim: '', n: 0};&#xa;</xsl:text>
-                                        <xsl:text>                math.end = {node: text, delim: '', n: 0};&#xa;</xsl:text>
-                                        <xsl:text>                doc.math.push(math);&#xa;</xsl:text>
-                                        <xsl:text>            });&#xa;</xsl:text>
-                                        <xsl:text>        }</xsl:text>
-                                    </raw>
-                                    <string></string>
-                                </array>
-                            </map>
-                        </xsl:if>
-                    </map>
-                    <map key="chtml">
-                        <number key="scale">0.98</number>
-                        <boolean key="mtextInheritFont">true</boolean>
-                    </map>
-                    <map key="loader">
-                        <array key="load">
-                            <string>input/asciimath</string>
-                            <string>[tex]/amscd</string>
-                            <string>[tex]/color</string>
-                            <string>[tex]/newcommand</string>
-                            <!-- necessary for \text{} in math -->
-                            <string>[tex]/textmacros</string>
-                            <string>[pretext]/mathjaxknowl3.js</string>
-                        </array>
-                        <map key="paths">
-                            <string key="pretext">
-                                <xsl:value-of select="$html.js.dir"/>
-                            </string>
-                        </map>
-                    </map>
-                    <map key="startup">
-                        <xsl:choose>
-                            <xsl:when test="$b-debug-react">
-                                <boolean key="typeset">false</boolean>
-                            </xsl:when>
-                            <xsl:otherwise>
-                                <!-- tell Runestone components that MathJax is all loaded -->
-                                <raw>
-                                    <xsl:text>pageReady() {&#xa;</xsl:text>
-                                    <xsl:text>      return MathJax.startup.defaultPageReady().then(function () {&#xa;</xsl:text>
-                                    <xsl:text>      console.log("in ready function");&#xa;</xsl:text>
-                                    <xsl:text>      rsMathReady();&#xa;</xsl:text>
-                                    <xsl:text>      }&#xa;</xsl:text>
-                                    <xsl:text>    )}</xsl:text>
-                                </raw>
-                            </xsl:otherwise>
-                        </xsl:choose>
-                    </map>
-                    <!-- optional presentation mode gets clickable, large math -->
-                    <xsl:if test="$b-html-presentation">
-                        <map key="options">
-                            <map key="menuOptions">
-                                <map key="settings">
-                                    <string key="zoom">Click</string>
-                                    <string key="zscale">300%</string>
-                                </map>
-                            </map>
-                        </map>
-                    </xsl:if>
-                </map>
-            </xsl:with-param>
-        </xsl:call-template>
-        <xsl:text>;</xsl:text>
-        <xsl:text>&#xa;</xsl:text>
-    </xsl:element>
-    <!-- mathjax javascript -->
-    <xsl:element name="script">
-        <!-- probably should be universal, but only adding for MJ 4    -->
-        <!-- TODO: make a literal "script" element with this attribute -->
-        <xsl:if test="$mathjax4-testing">
-            <xsl:attribute name="type">
-                <xsl:text>text/javascript</xsl:text>
-            </xsl:attribute>
-        </xsl:if>
+    <!-- MathJax 4 configuration via JavaScript module -->
+    <script type="module">
+        <xsl:text>import { startMathJax } from './</xsl:text>
+        <xsl:value-of select="$html.js.dir"/>
+        <xsl:text>/mathjax_startup.js';&#xa;</xsl:text>
+        <xsl:text>startMathJax({&#xa;</xsl:text>
+            <xsl:text>hasWebworkReps: </xsl:text><xsl:value-of select="$b-has-webwork-reps"/><xsl:text>,&#xa;</xsl:text>
+            <xsl:text>hasSage: </xsl:text><xsl:value-of select="$b-has-sage"/><xsl:text>,&#xa;</xsl:text>
+            <xsl:text>isReact: </xsl:text><xsl:value-of select="$b-debug-react"/><xsl:text>,&#xa;</xsl:text>
+            <xsl:text>htmlPresentation: </xsl:text><xsl:value-of select="$b-html-presentation"/><xsl:text>,&#xa;</xsl:text>
+        <xsl:text>});&#xa;</xsl:text>
+    </script>
+    <!-- MathJax 4 CDN -->
+    <script defer="true">
         <xsl:attribute name="src">
+            <xsl:text>https://cdn.jsdelivr.net/npm/mathjax@4/</xsl:text>
             <xsl:choose>
-                <xsl:when test="$mathjax4-testing">
-                    <xsl:text>https://cdn.jsdelivr.net/npm/mathjax@4/</xsl:text>
-                </xsl:when>
-                <xsl:otherwise>
-                    <xsl:text>https://cdn.jsdelivr.net/npm/mathjax@3/es5/</xsl:text>
-                </xsl:otherwise>
-            </xsl:choose>
-            <!-- CHTML is the default, SVG is for debugging -->
-            <xsl:choose>
-                <!-- SVG filename identical for v3, v4 -->
-                <!-- NB: is tex-mml-svg.js new for v4? -->
                 <xsl:when test="$debug.mathjax.svg = 'yes'">
                     <xsl:text>tex-svg.js</xsl:text>
                 </xsl:when>
-                <!-- new filename (default) for v4 -->
-                <xsl:when test="$mathjax4-testing">
-                    <xsl:text>tex-mml-chtml.js</xsl:text>
-                </xsl:when>
                 <xsl:otherwise>
-                    <xsl:text>tex-chtml.js</xsl:text>
+                    <xsl:text>tex-mml-chtml.js</xsl:text>
                 </xsl:otherwise>
             </xsl:choose>
         </xsl:attribute>
-    </xsl:element>
+    </script>
 </xsl:template>
 
 <!-- SageCell Javascript-->
diff --git a/xsl/pretext-runestone.xsl b/xsl/pretext-runestone.xsl
index 389371356..8b2e68477 100644
--- a/xsl/pretext-runestone.xsl
+++ b/xsl/pretext-runestone.xsl
@@ -225,7 +225,7 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     <xsl:comment>*** Runestone Services ***</xsl:comment>
     <xsl:text>&#xa;</xsl:text>
     <xsl:for-each select="$rs-js-tokens">
-        <script>
+        <script defer="true">
             <xsl:attribute name="src">
                 <xsl:value-of select="$cdn-prefix"/>
                 <xsl:text>_static/</xsl:text>

From d94bc2f00617e05ffde02115faa29086499d138e Mon Sep 17 00:00:00 2001
From: Rob Beezer <beezer@ups.edu>
Date: Sat, 4 Apr 2026 09:22:36 -0700
Subject: [PATCH 3/4] HTML: remove MathJax 3 artifacts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 js/mathjaxknowl3.js    | 48 ------------------------------------------
 xsl/pretext-common.xsl |  6 ------
 2 files changed, 54 deletions(-)
 delete mode 100644 js/mathjaxknowl3.js

diff --git a/js/mathjaxknowl3.js b/js/mathjaxknowl3.js
deleted file mode 100644
index 4b4ecac0a..000000000
--- a/js/mathjaxknowl3.js
+++ /dev/null
@@ -1,48 +0,0 @@
-
-      const { Configuration } = MathJax._.input.tex.Configuration;
-      const { CommandMap } = MathJax._.input.tex.SymbolMap;
-      const NodeUtil = MathJax._.input.tex.NodeUtil.default;
-
-      var GetArgumentMML = function (parser, name) {
-        var arg = parser.ParseArg(name);
-        if (!NodeUtil.isInferred(arg)) {
-          return arg;
-        }
-        var children = NodeUtil.getChildren(arg);
-        if (children.length === 1) {
-          return children[0];
-        }
-        var mrow = parser.create("node", "mrow");
-        NodeUtil.copyChildren(arg, mrow);
-        NodeUtil.copyAttributes(arg, mrow);
-        return mrow;
-      };
-
-      let mathjaxKnowl = {};
-      /**
-       * Implements \knowl{url}{math}
-       * @param {TexParser} parser The calling parser.
-       * @param {string} name The TeX string
-       */
-      mathjaxKnowl.Knowl = function (parser, name) {
-        var url = parser.GetArgument(name);
-        var arg = GetArgumentMML(parser, name);
-        var mrow = parser.create("node", "mrow", [arg], {
-            tabindex: '0',
-            "data-knowl": url
-        });
-        parser.Push(mrow);
-      };
-
-      new CommandMap(
-        "knowl",
-        {
-          knowl: ["Knowl"]
-        },
-        mathjaxKnowl
-      );
-      const configuration = Configuration.create("knowl", {
-        handler: {
-          macro: ["knowl"]
-        }
-      });
diff --git a/xsl/pretext-common.xsl b/xsl/pretext-common.xsl
index 010852e57..1d03821bf 100644
--- a/xsl/pretext-common.xsl
+++ b/xsl/pretext-common.xsl
@@ -411,12 +411,6 @@ $inline-solution-back|$divisional-solution-back|$worksheet-solution-back|$readin
 <!-- HTML only, a developer must elect to use this CSS file -->
 <xsl:param name="debug.developer.css" select="'no'"/>
 
-<!-- HTML only, testing early-releases of MathJax 4                    -->
-<!-- See: https://github.com/mathjax/MathJax/releases                  -->
-<!-- https://github.com/mathjax/MathJax-src/releases/tag/4.0.0-alpha.1 -->
-<xsl:param name="debug.mathjax4" select="'no'"/>
-<xsl:variable name="mathjax4-testing" select="$debug.mathjax4 = 'yes'"/>
-
 <!-- A permanent string parameter to control the creation of  -->
 <!-- "View Source" knowls, which is a developer task, not a   -->
 <!-- publisher task (though it could be?).  So permanent, but -->

From fd8902f4ede05d15d39cdb0ed4c235ab81785c0a Mon Sep 17 00:00:00 2001
From: "Davide P. Cervone" <dpvc@mathjax.org>
Date: Sun, 5 Apr 2026 10:07:07 -0700
Subject: [PATCH 4/4] HTML: streamline MathJax 4 configuration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 js/mathjax_startup.js | 35 ++++++++++-------------------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/js/mathjax_startup.js b/js/mathjax_startup.js
index cc686cb43..8ec535db2 100644
--- a/js/mathjax_startup.js
+++ b/js/mathjax_startup.js
@@ -16,11 +16,8 @@ let mathJaxOpts = {
     "tagIndent": ".8em",
     "packages": {
       "[+]": [
-        "base",
-        "ams",
         "amscd",
         "color",
-        "newcommand",
         "knowl"
       ]
     }
@@ -38,7 +35,6 @@ let mathJaxOpts = {
       "input/asciimath",
       "[tex]/amscd",
       "[tex]/color",
-      "[tex]/newcommand",
     ]
   }
 };
@@ -79,8 +75,9 @@ export function startMathJax(opts) {
           }
         });
 
+        const NodeUtil = MathJax._.input.tex.NodeUtil.default;
+
         function GetArgumentMML(parser, name) {
-          const NodeUtil = MathJax._.input.tex.NodeUtil.default;
           const arg = parser.ParseArg(name);
           if (!NodeUtil.isInferred(arg)) {
             return arg;
@@ -95,35 +92,23 @@ export function startMathJax(opts) {
           return mrow;
         };
 
-        let mathjaxKnowl = {};
-        /**
-         * Implements \knowl{url}{math}
-         * @param {TexParser} parser The calling parser.
-         * @param {string} name The TeX string
-         */
-        mathjaxKnowl.Knowl = function (parser, name) {
-          const url = parser.GetArgument(name);
-          const arg = GetArgumentMML(parser, name);
-          const mrow = parser.create("node", "mrow", [arg], { tabindex: '0', "data-knowl": url });
-          parser.Push(mrow);
-        };
-
         const CommandMap = MathJax._.input.tex.TokenMap.CommandMap;
         new CommandMap(
           "knowl",
           {
-            knowl: ["Knowl"]
-          },
-          mathjaxKnowl
+            knowl(parser, name) {
+              const url = parser.GetArgument(name);
+              const arg = GetArgumentMML(parser, name);
+              const mrow = parser.create("node", "mrow", [arg], { tabindex: '0', "data-knowl": url });
+              parser.Push(mrow);
+            }
+          }
         );
 
         MathJax.startup.defaultReady();
       },
       pageReady() {
-        return MathJax.startup.defaultPageReady().then(function () {
-          rsMathReady();
-        }
-        )
+        return MathJax.startup.defaultPageReady().then(rsMathReady);
       },
     }
   }