Skip to content

HTML: upgrade to MathJax 4 for browser rendering #2818

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
rbeezer wants to merge 4 commits into
base: master
Choose a base branch
from
+150 −192
Draft

HTML: upgrade to MathJax 4 for browser rendering #2818

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de9ba5b
HTML: add MathJax 4 configuration module (PR #2180)
ascholerChemeketa Apr 3, 2026
fd8e444
HTML: switch to MathJax 4 for browser rendering
rbeezer Apr 4, 2026
d94bc2f
HTML: remove MathJax 3 artifacts
rbeezer Apr 4, 2026
fd8902f
HTML: streamline MathJax 4 configuration
dpvc Apr 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 132 additions & 0 deletions js/mathjax_startup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
/***************************************************************
* 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": {
"[+]": [
"amscd",
"color",
"knowl"
]
}
},
"options": {
"ignoreHtmlClass": "tex2jax_ignore|ignore-math",
"processHtmlClass": "process-math",
},
"chtml": {
"scale": 0.98,
"mtextInheritFont": true
},
"loader": {
"load": [
"input/asciimath",
"[tex]/amscd",
"[tex]/color",
]
}
};


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"]
}
});

const NodeUtil = MathJax._.input.tex.NodeUtil.default;

function GetArgumentMML(parser, name) {
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;
};

const CommandMap = MathJax._.input.tex.TokenMap.CommandMap;
new CommandMap(
"knowl",
{
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(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;
}

48 changes: 0 additions & 48 deletions js/mathjaxknowl3.js
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions xsl/pretext-common.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
154 changes: 17 additions & 137 deletions xsl/pretext-html.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-->
Expand Down
2 changes: 1 addition & 1 deletion xsl/pretext-runestone.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down