Local MathJax with mkdocs-jupyter

[dr-br]

Hi,
I would like to use mkdocs-jupyter and MathJax together with the privacy plugin. Unfortunately it does not work out of the box (see #3641). If I put MathJax-single-file in the assets/javascripts folder and modify venv/lib/python3.12/site-packages/nbconvert/exporters/html.py (mathjax_url points to "/../assets/javascripts/MathJax.min.js"), then everything works as I wish. Local MathJax and privacy plugin enabled and working.

My question:
Is it possible, to give jupyter nbconvert, which is invoked somewhere in the conversion process, a hint to use a custom mathjax_url? So I do not have to hard code the url in the venv. Most convenient would be by providing an additional js or an entry in mkdocs.yml like

markdown_extensions:
  - mkdocs-jupyter:
      mathjax_url: "assets/javascripts/MathJax.min.js"

Thanks,
Samuel

[kamilkrzyskow]

Hello @dr-br,
I don't know about jupyter, but based on your explanation you need to modify the internal mathjax_url, because something doesn't work with it? If so then you should be able to modify it at runtime with some hook, similarly to:

• Hiding lines from code blocks #7113

A good place to modify the resources is probably the output of ‎HTMLExporter.from_notebook_node or perhaps modify the class property directly.

[kamilkrzyskow]

Inspecting mkdocs-jupyter I found this template file, which uses the resources.mathjax_url:

• https://github.com/danielfrg/mkdocs-jupyter/blob/74892c0b790f076126967850f175aec559474ec7/src/mkdocs_jupyter/templates/mkdocs_html/notebook.html.j2#L64-L66

I'm not yet sure if you can define your own templates 🤔
Sadly it's not configurable, so best to stick with changing the mathjax url directly

[dr-br]

Thanks @kamilkrzyskow for the reply and the clarification.

In case someone wants to use local MathJax:

sed -i 's#https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS_CHTML-full,Safe#/../assets/javascripts/MathJax.min.js#g' venv/lib/python3.12/site-packages/nbconvert/exporters/html.py

Unfortunately, only code blocks work, inline code does not work. I have to further investigate this...

[dr-br]

Dear @kamilkrzyskow ,
the following bit was missing:
In order to get inline code working, the file mathjax.js was missing. Single-file Mathjax is convenient, but not needed.

mkdocs+privacy+mkdocs-jupyter now works

Steps to reproduce

1. Download MathJax:

wget https://github.com/mathjax/MathJax/archive/refs/tags/3.2.2.zip
unzip 3.2.2.zip "MathJax-3.2.2/es5/*" -d docs/assets/javascripts/

2. Create mathjax.js:

window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
    //   displayMath: [ ['$$', '$$'], ['\[', '\]'] ],
      processEscapes: true,
      processEnvironments: true
    },
    options: {
    //   ignoreHtmlClass: ".*|",
    //   processHtmlClass: "arithmatex"
    }
  };
  document$.subscribe(() => { 
    MathJax.startup.output.clearCache()
    MathJax.typesetClear()
    MathJax.texReset()
    MathJax.typesetPromise()
  })

3. Adapt nbconvert:, removing implicit load of Mathjax (see here)
   sed -i 's#https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS_CHTML-full,Safe##g' venv/lib/python3.12/site-packages/nbconvert/exporters/html.py
4. Adjust mkdocs.yml:

plugins:
    - privacy
    - mkdocs-jupyter

extra_javascript:
  - assets/javascripts/mathjax.js
  - assets/javascripts/MathJax-3.2.2/es5/tex-mml-chtml.js

→ Privacy+MathJax = ♥

Downsides

I see 1 downside:

• nbconvert should not be modified but configured via e.g. yml

[dr-br]

Dear @kamilkrzyskow
I modified mkdocs-jupyter accordingly, so the config could look as follows, as soon as it's upstreamed:

extra_javascript:
  - assets/javascripts/mathjax.js
  - assets/javascripts/MathJax-3.2.2/es5/tex-mml-chtml.js

# Plugins
plugins:
  - mkdocs-jupyter:
      custom_mathjax_url: "/assets/javascripts/MathJax-3.2.2/es5/tex-mml-chtml.js"

[EricDuminil]

Thanks for the infos. Combining mkdocs-jupyter and privacy led to thousands of repeated requests from the webpage, even though I didn't have any MathJax code inside the Notebook.

I simply truncate the mathjax JS file to 0 with truncate -s 0 site/assets/external/cdnjs.cloudflare.com/ajax/libs/mathjax/*/*.js before uploading the site, and it seems to work fine.