Skip to content

Fix conflict in with KaTeX and Require.js #12493

Merged
cderv merged 3 commits intomainfrom
katex-jupyter-embed
Apr 8, 2025
Merged

Fix conflict in with KaTeX and Require.js #12493
cderv merged 3 commits intomainfrom
katex-jupyter-embed

Conversation

@cderv
Copy link
Copy Markdown
Member

@cderv cderv commented Apr 8, 2025

When embed-resources: true, by default Math will evade embedding by adding back the JS script node in browser.

However, KaTeX and Require.js does not play well together, and quarto does a postprocessing of HTML file to opt out require while loading KaTeX

export function katexPostProcessor() {
return (doc: Document) => {
// find katex elements
const katexScript = doc.querySelector(`script[src$="katex.min.js"]`);
const katexCss = doc.querySelector(`link[href$="katex.min.css"]`);
if (katexScript && katexCss) {
// strip defer
katexScript.removeAttribute("defer");
// before
const katexBefore = doc.createElement("script");
katexBefore.innerText =
"window.backupDefine = window.define; window.define = undefined;";
katexScript.parentNode?.insertBefore(katexBefore, katexScript);
// after
const katexAfter = doc.createElement("script");
katexAfter.innerText =
"window.define = window.backupDefine; window.backupDefine = undefined;";
katexCss?.parentNode?.insertBefore(
katexAfter,
katexCss,
);
}
return Promise.resolve(kHtmlEmptyPostProcessResult);
};
}

This post-processing is not happening when embed-resources is used, as we do insert a script that will dynamically append loading <script> to <head>.

This is the script tweaked in this PR to be context-aware of require conflict.

The opt-out is narrower than the post-processor to disable the AMD detection only, and enable it at the right time after the script is loaded.

We could probably do the same but I didn't in this PR as tests are passing like this.

fixes #10113

cderv added 3 commits April 8, 2025 16:58
… needs to be context aware of require conflict

- Require.js being loaded will trigger AMD detection for KaTeX, which prevents `widow.katex` to be defined
-  About KaTeX in browser: https://katex.org/docs/browser#module-loaders
- About AMD in JS: https://github.com/amdjs/amdjs-api/wiki/AMD#defineamd-property-
@cderv cderv merged commit 36e704c into main Apr 8, 2025
49 checks passed
@cderv cderv deleted the katex-jupyter-embed branch April 8, 2025 18:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Conflict between katex, pandas and embed-resources

1 participant