Speaker notes not working for reveal.js slides

[joelostblom]

I can't get speaker notes when exporting slides following the instructions in the docs. Pressing s in the slide shows seems to not do anything while other keyboard shortcuts such as o works. Tested on recent versions of Firefox and Chromium, which work fine with speaker notes in this demo reveal.js presentation and with local reveal.js presentations generated from R Markdown by xaringan.

This is my directory layout:

.
├── reveal.js/
├── notes-test.ipynb
└── notes-test.slides.html

If I check out tag 3.5.0, the slides don't format correctly and instead all code cells are visible on a single page. If I use master instead, the presentation works as expected except from the s key not bringing up the speaker view. I tried running both

jupyter nbconvert notes-test.ipynb --to slides --reveal-prefix reveal.js

and

jupyter nbconvert notes-test.ipynb --to slides --reveal-prefix reveal.js --post serve

and

jupyter nbconvert notes-test.ipynb --to slides

All give seemingly the same result (when master is checkout in the reveal.js folder)

Contents of `notes-test.ipynb`

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "8"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "4 + 4"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Main"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "These are notes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "skip"
    }
   },
   "source": [
    "Skip"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "slide"
    }
   },
   "source": [
    "# Main"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "subslide"
    }
   },
   "source": [
    "# Sub"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "slideshow": {
     "slide_type": "notes"
    }
   },
   "source": [
    "More notes"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}

jupyter core     : 4.6.3
jupyter-notebook : 6.1.4
qtconsole        : not installed
ipython          : 7.18.1
ipykernel        : 5.3.4
jupyter client   : 6.1.7
jupyter lab      : 2.2.6
nbconvert        : 6.0.6
ipywidgets       : not installed
nbformat         : 5.0.5
traitlets        : 5.0.4

[MSeal]

@SylvainCorlay or @maartenbreddels do one of you know more about changes with reveal that might cause this? I've not touched that part of nbconvert in any significant way

[SylvainCorlay]

Hum I admit I have not worked with the speaker notes.

Nbconvert 6 upgraded to revealjs 4, which is a major release, and should not work with 3.x. The nbconvert reveal template was significantly changed to work with the regular html exporter.

[johann-petrak]

Same problem here, there is very little documentaiton on how to make Notes work and nothing that I found using Google works.

I am using python 3.6 and have

jupyter core     : 4.6.3
jupyter-notebook : 6.1.4
qtconsole        : 5.0.1
ipython          : 7.16.1
ipykernel        : 5.3.4
jupyter client   : 6.1.7
jupyter lab      : 2.2.9
nbconvert        : 6.0.7
ipywidgets       : 7.5.1
nbformat         : 5.0.8
traitlets        : 4.3.3

It does not work with any of the versions I tried to checkout locally: 3.5.0, 4.0.1, 4.1.0, pressing "s" does nothing at all.

Tried with both Firefox and Google Chrome.

[SylvainCorlay]

@damianavila do you have any input on this?

[johann-petrak]

I just discovered that the RISE package does this right: after installing RISIS, the slides can be shown from within the notebook and there, the speaker notes do work, and also the font sizes and the space occupied by the slide is done much better than with the slides generated by nbconvert.

[agoose77]

The speaker notes plugin is no longer included by default in the Reveal.js template. It's quite easy to add them, but for non-nbconvert developers, the quickest solution is to create a custom template which overrides the JS. Here's the index.html.js for the template:

{%- extends "reveal/index.html.j2" -%}

{% block footer_js %}
<script>
require(
    {
      // it makes sense to wait a little bit when you are loading
      // reveal from a cdn in a slow connection environment
      waitSeconds: 15
    },
    [
      "{{ reveal_url_prefix }}/dist/reveal.js",
      "{{ reveal_url_prefix }}/plugin/notes/notes.js"
    ],
    function(Reveal, RevealNotes){
        // Full list of configuration options available here: https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            transition: "{{reveal_transition}}",
            plugins: [RevealNotes]
        });
        var update = function(event){
          if(MathJax.Hub.getAllJax(Reveal.getCurrentSlide())){
            MathJax.Hub.Rerender(Reveal.getCurrentSlide());
          }
        };
        Reveal.addEventListener('slidechanged', update);
        function setScrollingSlide() {
            var scroll = {{ reveal_scroll }}
            if (scroll === true) {
              var h = $('.reveal').height() * 0.95;
              $('section.present').find('section')
                .filter(function() {
                  return $(this).height() > h;
                })
                .css('height', 'calc(95vh)')
                .css('overflow-y', 'scroll')
                .css('margin-top', '20px');
            }
        }
        // check and set the scrolling slide every time the slide change
        Reveal.addEventListener('slidechanged', setScrollingSlide);
    }
);
</script>
{% endblock footer_js %}

and here's the conf.json:

{
  "base_template": "reveal",
  "mimetypes": {
    "text/html": true
  }
}

These files should be placed in a directory with a name that isn't already an nbconvert template, e.g. reveal-slides. This directory should then be placed in the template search path. This can be done either by symlinking / copying your template into the appropriate template directory e.g. /home/<USER>/.local/share/jupyter/nbconvert/templates (see the data section on jupyter --paths, e.g. jupyter --paths --json | jq .data to find the share directory on your system), or by adding your directory to the Jupyter search path.

Modify the Search Path

To add your directory to the search path, you need to:

1. Create a local share/jupyter/nbconvert/templates directory tree.
2. Move your reveal-slides directory to this templates directory so that you have:
   • $PWD
     • share
       • jupyter
         • nbconvert
           • templates
             • reveal-slides
3. Run nbconvert with JUPYTER_PATH="$PWD/share:$JUPYTER_PATH" nbconvert ...

[SylvainCorlay]

@agoose77 do you think this should be in the base reveal.js template?

[agoose77]

I would lean towards yes - the only negative is the additional package fetch, but the user can cache this anyway if they specify the right configuration value.

[SylvainCorlay]

Great! I think a PR would be very welcome then!

[nogkaha]

I seems to have the same issue, and following the suggested fix from @agoose77 didn't work for me. As described by @joelostblom, when setting the reveal.js directory to master, the slides look fine but I can't turn on the speaker notes by clicking on s while other shortcuts work as expected. I even tried to use RISE as suggested by @johann-petrak but it works only with jupyter notebooks and not with lab ATM.

I use the following to create the slides and serve them:

jupyter nbconvert tos_impact_multiple.ipynb --to slides --SlidesExporter.exclude_input=True --SlidesExporter.reveal_scroll=True --post serve  --template reveal-slides

Jupyter env:

jupyter core     : 4.7.1
jupyter-notebook : 6.4.0
qtconsole        : not installed
ipython          : 7.24.1
ipykernel        : 5.5.5
jupyter client   : 6.1.12
jupyter lab      : 3.0.16
nbconvert        : 6.0.7
ipywidgets       : not installed
nbformat         : 5.1.3
traitlets        : 5.0.5

Please let me know if I can provide more info,

Thanks

[agoose77]

@nogkaha to make this simpler to debug, can you replace the installed version with the latest master? Try this, and check that it actually does install over the existing version:

pip install "git+https://github.com/jupyter/nbconvert.git#egg=nbconvert"

Then run the new nbconvert:

jupyter nbconvert tos_impact_multiple.ipynb --to slides --SlidesExporter.exclude_input=True --SlidesExporter.reveal_scroll=True --post serve

[nogkaha]

@agoose77 thanks for the super quick support. I did as you suggest and the speaker notes are working now!
TBH I'm not sure what I did wrong in my attempt, but I guess I will keep the dev version since this is the only thing that worked for me.