Fragment speaker notes do not appear on the slides with `shownotes: true` option #3759

jdejaegh · 2025-02-27T09:58:31Z

Hello,

First off, thanks for this amazing project!

I recently learned about speaker notes for fragments #1636, which are really useful. However, the notes defined in the data-notes attribute do not appear on the slides when using shownotes: true. I tested a minimal working example with version 5.1.0 and the latest commit on master.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>reveal.js</title>
  <link rel="stylesheet" href="dist/reset.css">
  <link rel="stylesheet" href="dist/reveal.css">
  <link rel="stylesheet" href="dist/theme/white.css">
</head>
<body>
<div class="reveal">
  <div class="slides">
    <section>
      <h1>Example</h1>
      <ol>
        <li class="fragment" data-notes="Notes for 1">Item 1</li>
        <li class="fragment" data-notes="Notes for 2">Item 2</li>
        <li class="fragment" data-notes="Notes for 3">Item 3</li>
      </ol>
    </section>
  </div>
</div>

<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
    Reveal.initialize({
        hash: true,
        showNotes: true,
        plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
    });
</script>
</body>
</html>

Open this presentation, go to the next slide and notice that "Speaker notes" on the side of the slide remains empty (I would expect it to show "Notes for 1" and so on). The notes show up correctly in the speaker view.

In the following image, see that the notes appear in the bottom right pane but not on the slide (left pane).

My current solution is to add a function triggered when a fragment is shown.

         showNotes: true,
         plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
     });
+    Reveal.addEventListener('fragmentshown', function (event) {
+        const currentFragment = document.querySelector(".current-fragment");
+        if (currentFragment) {
+            const notesContent = currentFragment.getAttribute("data-notes");
+            if (notesContent !== null) {
+                const speakerNotesElement = document.querySelector(".speaker-notes");
+                if (speakerNotesElement) {
+                    speakerNotesElement.innerHTML = notesContent;
+                }
+            }
+        }
+    });
 </script>
 </body>
 </html>

The workaround is probably not the best but works in my case.

Would it be possible to get the fragment speaker notes to show up on the slide when using the shownotes: true option?

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fragment speaker notes do not appear on the slides with `shownotes: true` option #3759

Fragment speaker notes do not appear on the slides with `shownotes: true` option #3759

jdejaegh commented Feb 27, 2025

Fragment speaker notes do not appear on the slides with shownotes: true option #3759

Fragment speaker notes do not appear on the slides with shownotes: true option #3759

Comments

jdejaegh commented Feb 27, 2025

Fragment speaker notes do not appear on the slides with `shownotes: true` option #3759

Fragment speaker notes do not appear on the slides with `shownotes: true` option #3759