Changing slide background for Jupyter + RevealJS presentations

I am experimenting writing slides and lecture notes with Jupyter for the security class I’m teaching. So far it’s been awesome: I can format text in Markdown like this blog, inject LaTeX formulas to write math with MathJax, and run Python code, which plays wonderfully with presenting cryptography on the slides.

A point where it lacks a bit at the moment is on presentation options. At the moment of writing I found no way to change the background of a specific slide, so here is my hack (works with Reveal.JS):

Step 1

Place a raw section at the beginning of your Jupyter notebook:

<script>
    function findAncestor (el, name) {
        while ((el = el.parentElement) && el.nodeName.toLowerCase() !== name);
        return el;
    }
    function colorAll(el, textColor) {
        el.style.color = textColor;
        Array.from(el.children).forEach((e) => {colorAll(e, textColor);});
    }
    function setBackgroundImage(src, textColor) {
        var section = findAncestor(document.currentScript, "section");
        if (section) {
            section.setAttribute("data-background-image", src);
			if (textColor) colorAll(section, textColor);
        }
    }
</script>

Step 2

When you want to change the background (and optionally text color) of the current section, just add another raw section with the following code:

<script>
    setBackgroundImage("mybackground.jpg", "white");
</script>

That’s all!