Skip to content

feat!: upgrade to mathjax v4 #33555

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

Open
navinkarkera wants to merge 11 commits into
base: master
Choose a base branch
from
Open

feat!: upgrade to mathjax v4 #33555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e6c9a20
feat: mathjax upgrade v2 to v3
navinkarkera Oct 18, 2023
5e6700f
Merge branch 'master' into navin/upgrade-mathjax-v3
navinkarkera Jun 16, 2026
c65f945
fix(mathjax): complete v4 upgrade fixes
navinkarkera Jun 16, 2026
6dd7f9b
fix(mathjax): use chtml output
navinkarkera Jun 16, 2026
40d3ae7
fix(mathjax): support v4 formula previews
navinkarkera Jun 17, 2026
1fd78e4
fix(mathjax): render formula previews with v4
navinkarkera Jun 17, 2026
5ef1413
Merge branch 'master' into navin/upgrade-mathjax-v3
navinkarkera Jun 25, 2026
c9945ba
temp: fix
navinkarkera Jun 25, 2026
b960c53
fix(mathjax): enable extracted xblocks for v4
navinkarkera Jun 26, 2026
f1e6825
Merge branch 'master' into navin/upgrade-mathjax-v3
navinkarkera Jun 29, 2026
7e234bd
fix(mathjax): stabilize v4 xblock rendering
navinkarkera Jun 29, 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
61 changes: 34 additions & 27 deletions cms/djangoapps/pipeline_js/js/xmodule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,36 +16,42 @@ define(

window.$ = $;
window._ = _;
window.MathJax = {
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
// autocollapse: false, // Not found in v3
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};

$script(
'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js'
+ '?config=TeX-MML-AM_SVG&delayStartupUntil=configured',
'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js',
'mathjax',
function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
]
},
CommonHTML: {linebreaks: {automatic: true}},
SVG: {linebreaks: {automatic: true}},
'HTML-CSS': {linebreaks: {automatic: true}},
});

// In order to eliminate all flashing during interactive
// preview, it is necessary to set processSectionDelay to 0
// (remove delay between input and output phases). This
// effectively disables fast preview, regardless of
// the fast preview setting as shown in the context menu.
window.MathJax.Hub.processSectionDelay = 0;
window.MathJax.Hub.Configured();

window.addEventListener('resize', MJrenderer);

let t = -1;
Expand All @@ -60,7 +66,8 @@ define(
if (oldWidth !== document.documentElement.scrollWidth) {
t = window.setTimeout(function() {
oldWidth = document.documentElement.scrollWidth;
MathJax.Hub.Queue(['Rerender', MathJax.Hub]);
MathJax.typesetClear();
MathJax.typesetPromise();
t = -1;
}, delay);
}
Expand Down
62 changes: 28 additions & 34 deletions cms/static/cms/js/require-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,34 @@
}
});

// MathJax Fast Preview was introduced in 2.5. However, it
// causes undesirable flashing/font size changes when
// MathJax is used for interactive preview (equation editor).
// Setting processSectionDelay to 0 (see below) fully eliminates
// fast preview, but to reduce confusion, we are also setting
// the option as displayed in the context menu to false.
// When upgrading to 2.6, check if this variable name changed.
window.MathJax = {
menuSettings: {
CHTMLpreview: false,
collapsible: true,
autocollapse: false,
explorer: true
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
};
Expand Down Expand Up @@ -137,7 +152,7 @@
'jquery_extend_patch': 'js/src/jquery_extend_patch',

// externally hosted files
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js?noext',
'youtube': [
// youtube URL does not end in '.js'. We add '?noext' to the path so
// that require.js adds the '.js' to the query component of the URL,
Expand Down Expand Up @@ -249,27 +264,6 @@
},
'mathjax': {
exports: 'MathJax',
init: function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
]
}
});
// In order to eliminate all flashing during interactive
// preview, it is necessary to set processSectionDelay to 0
// (remove delay between input and output phases). This
// effectively disables fast preview, regardless of
// the fast preview setting as shown in the context menu.
window.MathJax.Hub.processSectionDelay = 0;
window.MathJax.Hub.Configured();
}
},
'URI': {
exports: 'URI'
Expand Down
42 changes: 32 additions & 10 deletions cms/static/cms/js/spec/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,37 @@
window.edx.HtmlUtils = HtmlUtils;
window.edx.StringUtils = StringUtils;
});

window.MathJax = {
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
}

requirejs.config({
Expand Down Expand Up @@ -69,7 +100,7 @@
'domReady': 'xmodule_js/common_static/js/vendor/domReady',
'URI': 'xmodule_js/common_static/js/vendor/URI.min',
'mock-ajax': 'xmodule_js/common_static/js/vendor/mock-ajax',
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js?noext',
'youtube': '//www.youtube.com/player_api?noext',
'js/src/ajax_prefix': 'xmodule_js/common_static/js/src/ajax_prefix',
'js/spec/test_utils': 'js/spec/test_utils'
Expand Down Expand Up @@ -172,15 +203,6 @@
},
'mathjax': {
exports: 'MathJax',
init: function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [['\\(', '\\)'], ['[mathjaxinline]', '[/mathjaxinline]']],
displayMath: [['\\[', '\\]'], ['[mathjax]', '[/mathjax]']]
}
});
return window.MathJax.Hub.Configured();
}
},
'accessibility': {
exports: 'accessibility',
Expand Down
43 changes: 33 additions & 10 deletions cms/static/cms/js/spec/main_squire.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,38 @@
'use strict';

var i, specHelpers, testFiles;
if (window) {
window.MathJax = {
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
}

requirejs.config({
baseUrl: '/base/',
Expand Down Expand Up @@ -48,7 +80,7 @@
'draggabilly': 'xmodule_js/common_static/js/vendor/draggabilly',
'domReady': 'xmodule_js/common_static/js/vendor/domReady',
'URI': 'xmodule_js/common_static/js/vendor/URI.min',
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_SVG&delayStartupUntil=configured', // eslint-disable-line max-len
mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js?noext',
'youtube': '//www.youtube.com/player_api?noext',
'js/src/ajax_prefix': 'xmodule_js/common_static/js/src/ajax_prefix'
},
Expand Down Expand Up @@ -142,15 +174,6 @@
},
'mathjax': {
exports: 'MathJax',
init: function() {
window.MathJax.Hub.Config({
tex2jax: {
inlineMath: [['\\(', '\\)'], ['[mathjaxinline]', '[/mathjaxinline]']],
displayMath: [['\\[', '\\]'], ['[mathjax]', '[/mathjax]']]
}
});
window.MathJax.Hub.Configured();
}
},
'URI': {
exports: 'URI'
Expand Down
13 changes: 13 additions & 0 deletions cms/static/sass/studio-main-v1.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,16 @@
@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
@import 'build-v1'; // shared app style assets/rendering
@import '_builtin-block-variables';


mjx-container {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}

table>tbody>tr>td>mjx-container {
max-width: inherit;
overflow-x: auto;
overflow-y: hidden;
}
79 changes: 29 additions & 50 deletions common/static/common/js/discussion/mathjax_include.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,35 @@
// See common/templates/mathjax_include.html for info on Fast Preview mode.
var disableFastPreview = true,
vendorScript;
if (typeof MathJax === 'undefined') {
if (disableFastPreview) {
window.MathJax = {
menuSettings: {CHTMLpreview: false}
};
}

vendorScript = document.createElement('script');
vendorScript.onload = function() {
'use strict';

var MathJax = window.MathJax,
setMathJaxDisplayDivSettings;
MathJax.Hub.Config({
tex2jax: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
]
}
});
if (disableFastPreview) {
MathJax.Hub.processSectionDelay = 0;
}
MathJax.Hub.signal.Interest(function(message) {
if (message[0] === 'End Math') {
setMathJaxDisplayDivSettings();
}
});
setMathJaxDisplayDivSettings = function() {
$('.MathJax_Display').each(function() {
this.setAttribute('tabindex', '0');
this.setAttribute('aria-live', 'off');
this.removeAttribute('role');
this.removeAttribute('aria-readonly');
});
};
};
// Automatic loading of Mathjax accessibility files
window.MathJax = {
menuSettings: {
collapsible: true,
autocollapse: false,
explorer: true
tex: {
inlineMath: [
['\\(', '\\)'],
['[mathjaxinline]', '[/mathjaxinline]']
],
displayMath: [
['\\[', '\\]'],
['[mathjax]', '[/mathjax]']
],
autoload: {
color: [],
colorv2: ['color']
},
packages: {'[+]': ['noerrors']}
},
options: {
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process',
menuOptions: {
settings: {
collapsible: true,
explorer: true
},
},
},
loader: {
load: ['input/asciimath', '[tex]/noerrors']
}
};
vendorScript.src = 'https://cdn.jsdelivr.net/npm/mathjax@2.7.5/MathJax.js?config=TeX-MML-AM_HTMLorMML';
var vendorScript = document.createElement('script');
vendorScript.src = 'https://cdn.jsdelivr.net/npm/mathjax@4.1.2/tex-mml-chtml.js';
document.body.appendChild(vendorScript);
}
Loading
Loading