I just read a great blog post by Christian Heilmann (Principal Developer Evangelist for MDN) about how you can use the detached browser console as a way to broadcast speaker notes in an HTML-based presentation: Browsers have a presenter mode: console.info() It's an incredibly simple and practical idea. His code was tied to the Shower presentation framework (a new one for me), but it took all of two minutes to repurpose it for reveal.js.
reveal.js has an event handler for slide loading called slidechanged. I added an event listener for that which checks the loaded slide for the notes class. If it finds it, I use the same regex as Christian and drop it into the console.
Here is a quick screenshot. Note that I have not detached the console for this shot. (Also - I just now noticed the horrible grammar in the notes. Since these were just for me, I'm not going to fix it. ;)
Archived Comments
Hi,
Did you add this code snippet to the reveal.js file?
No it was in my index.html file.
Thank you, this is extremely useful.
I have a lot of notes and for some reason notes.html isn't showing me the scrollbar.
I've just tweaked the above code slightly to:
* Show the notes when the slides initially load by binding to the `ready` event
* Clear the console if their are no notes for the current slide
```
Reveal.addEventListener( 'ready', addNotesToConsole );
Reveal.addEventListener( 'slidechanged', addNotesToConsole );
function addNotesToConsole( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
var notes = event.currentSlide.querySelector(".notes");
if(notes) {
console.info(notes.innerHTML.replace(/\n\s+/g,'\n'));
}
else {
console.clear();
}
}
```
Nice, thanks for sharing that Phil!