Deploying notebook in Binder using Voila Reveal template

Binder
1

I’m trying to deploy a notebook to Binder as slides, so I’m setting up a voila.json file that specifies that it should use the reveal template. This works wonderfully when I run Voila locally on my own computer, but when I run the Binder deployment the math equations in my markdown cells won’t render anymore.

Initially, if I used the default lab template I would have the same problem with the equations, but I got it fixed adding a cell with this code:

%%html
<script>
window.MathJax = {
tex: {
  inlineMath: [['$', '$'], ['\(', '\)']],  // habilita $...$ y \( ... \)
  displayMath: [['$$', '$$'], ['\[', '\]']]
},
svg: { fontCache: 'global' }
};
var script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
script.async = true;
document.head.appendChild(script);

</script>

With the above code, the MathJax equations would render properly as long as lab template is used. Once I start using the reveal template to turn it into slides, the math wouldn’t render.

Interestingly, I get the same behavior when I run locally a JupyterLab and use the ‘Render with Voila’ extension, although it renders well when I run voila from the terminal.

I can’t figure out how to deploy my notebook as a presentation with slides to Binder and have the math render properly.

2

Is this a use of the public MyBinder service? If so, it is usually best in this forum to share the link to the public repo associated. If it isn’t, then it is usually best to share a minimal reproducible example with content you don’t mind sharing.

However, in this case it is already built into the Voila demo. (So you could point people at that I believe.) I was able to reproduce what you are saying this way:
Go to here and click the ‘launch binder’ badge. When the session comes up, click to open the notebooks directory and choose the reveal.ipynb notebook to open with Voila. You’ll see the ipywidgets label of x^2 doesn’t render. It does though render via MathJax if you edit the session URL to switch to JupyterLab.

Similarly to your situation, if you add a markdown cell to that notebook and put in it:

Amazing $E=mc^2$!

You’ll find that renders fine in JupyterLab 4, but again not in Voila.

So it is reproducibly shareable and it seems it is an ongoing issue.

As to the root issue and how to deal…

I cannot tell if this issue, which leads to this one about “the issue with MathJax3 in ipywidgets”, is pointing this out or not. Both referenced issues are still open.

If no one else posts here in response, you may want to open a new issue in the Voila repo and ask about the markdown cell aspect specifically, pointing to this post. As you were able to work around one aspect maybe there is another solution for now, until it is solved.

3

Thank you so much for taking the time to look into this! And thanks for pointing out that the reveal example in the Voila repo also shows this behavior.

This is indeed a use of the public MyBinder service. The repo I’m trying to deploy is:

Presentaciones Dinámica

The “test.ipynb” is a smaller notebook that I’m using to try to get this to work.

I looked into the links you copied and it seems they were having problems with displaying math in the widgets but not in the markdown, which is interesting. This led me to this post, suggesting it has to do with the newer Voila versions, but it might work with previous versions. I’ll do some testing to see if that’s the case.

1 Like
4

Interesting. I didn’t look at the closed issues. I would assume it being a year old, I’d have gotten a new version using the fixed version though. The issue should not be closed if it didn’t resolve it.