cwickham · Sep 25, 2026 · Oct 1, 2026
diff --git a/docs/authoring/code-annotation.qmd b/docs/authoring/code-annotation.qmd
@@ -28,7 +28,7 @@ penguins |>                                            # <1>
 
 The default HTML annotation style displays annotations in a list below the code block. Clicking on the annotation number in the list highlights the relevant lines in the code. Other [HTML styles](#html-styles) hide the annotations, revealing them in a tooltip when a user hovers or selects a marker, as illustrated in this example of a Revealjs presentation:
 
-```{.yaml code-preview="code-annotation-example/revealjs.qmd"}
+```{.yaml code-preview="code-annotation-example/revealjs.qmd" code-preview-title="Example presentation with code annotations in tooltips"}
 format: revealjs
 ```
 

diff --git a/docs/presentations/_columns-reveal.md b/docs/presentations/_columns-reveal.md
@@ -2,7 +2,7 @@
 
 To put material in side by side columns, you can use a native div container with class `.columns`, containing two or more div containers with class `.column` and a `width` attribute:
 
-```{.markdown code-preview="examples/columns.qmd"}
+```{.markdown code-preview="examples/columns.qmd" code-preview-title="Example slide with two columns"}
 :::: {.columns}
 
 ::: {.column width="40%"}

diff --git a/docs/presentations/_creating-slides-reveal.md b/docs/presentations/_creating-slides-reveal.md
@@ -2,7 +2,7 @@
 
 In markdown, slides are delineated using headings. For example, here is a simple slide show with two slides (each defined with a level 2 heading (`##`):
 
-``` {.markdown code-preview="examples/creating-slides-1.qmd"}
+``` {.markdown code-preview="examples/creating-slides-1.qmd" code-preview-title="Example presentation with two slides"}
 ---
 title: "Habits"
 author: "John Doe"
@@ -22,7 +22,7 @@ format: {{< meta slide-format >}}
 
 You can also divide slide shows into sections with title slides using a level 1 heading (`#`). For example:
 
-``` {.markdown code-preview="examples/creating-slides-2.qmd"}
+``` {.markdown code-preview="examples/creating-slides-2.qmd" code-preview-title="Example presentation with section title slides"}
 ---
 title: "Habits"
 author: "John Doe"
@@ -56,7 +56,7 @@ format: {{< meta slide-format >}}
 
 Finally, you can also delineate slides using horizontal rules (for example, if you have a slide without a title):
 
-``` {.markdown code-preview="examples/creating-slides-3.qmd"}
+``` {.markdown code-preview="examples/creating-slides-3.qmd" code-preview-title="Example presentation with slides divided by horizontal rules"}
 ---
 title: "Habits"
 author: "John Doe"

diff --git a/docs/presentations/_incremental-lists-reveal.md b/docs/presentations/_incremental-lists-reveal.md
@@ -2,7 +2,7 @@
 
 By default number and bullet lists within slides are displayed all at once. You can override this globally using the `incremental` option. For example:
 
-```{.yaml code-preview="examples/incremental-lists-1.qmd"}
+```{.yaml code-preview="examples/incremental-lists-1.qmd" code-preview-title="Example presentation with incremental lists"}
 title: "My Presentation"
 format:
   {{< meta slide-format >}}:
@@ -11,7 +11,7 @@ format:
 
 You can also explicitly make any list incremental or non-incremental by surrounding it in a div with an explicit class that determines the mode. To make a list incremental do this:
 
-```{.markdown code-preview="examples/incremental-lists-2.qmd"}
+```{.markdown code-preview="examples/incremental-lists-2.qmd" code-preview-title="Example slide with an incremental list"}
 ::: {.incremental}
 - Eat spaghetti
 - Drink wine
@@ -20,7 +20,7 @@ You can also explicitly make any list incremental or non-incremental by surround
 
 To make a list non-incremental do this:
 
-```{.markdown code-preview="examples/incremental-lists-3.qmd"}
+```{.markdown code-preview="examples/incremental-lists-3.qmd" code-preview-title="Example slide with a non-incremental list"}
 ::: {.nonincremental}
 - Eat spaghetti
 - Drink wine

diff --git a/docs/presentations/_incremental-pause-reveal.md b/docs/presentations/_incremental-pause-reveal.md
@@ -1,6 +1,6 @@
 You can also insert a pause within a slide (keeping the content after the pause hidden) by inserting three dots separated by spaces:
 
-```{.markdown code-preview="examples/incremental-pause.qmd"}
+```{.markdown code-preview="examples/incremental-pause.qmd" code-preview-title="Example slide with a pause"}
 ## Slide with a pause
 
 content before the pause

diff --git a/docs/presentations/revealjs/advanced.qmd b/docs/presentations/revealjs/advanced.qmd
@@ -149,7 +149,7 @@ The `absolute` class lets you position elements at arbitrary positions on a slid
 
 For example, here we add the `.absolute` class to three images and give them each a distinct position on the slide (note that we use also `width` and `height` to control their dimensions):
 
-``` {.markdown .reveal-demo code-preview="demo/mini/absolute.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/absolute.qmd" code-preview-title="Example slide with absolute positioned images"}
 ![](kitten-350-300.jpeg){.absolute top=200 left=0 width="350" height="300" fig-alt="Grey kitten"}
 
 ![](kitten-450-250.jpeg){.absolute top=50 right=50 width="450" height="250" fig-alt="Tabby kitten"}
@@ -180,7 +180,7 @@ The `r-stack` layout class lets you center and place multiple elements on top of
 
 For example, here we create a div with the `.r-stack` class and then include 3 images (each of which uses `.fragment` so they display incrementally):
 
-``` {.markdown .reveal-demo code-preview="demo/mini/stack.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/stack.qmd" code-preview-title="Example slide with a stack layout"}
 ::: {.r-stack}
 ![](image1.png){.fragment width="450" height="300"}
 
@@ -256,7 +256,7 @@ Revealjs can automatically animate elements across slides. All you need to do is
 
 Here's a simple example to give you a better idea of how it can be used. The slides in this example have titles, but you can also omit them and use just the `auto-animate` attribute.
 
-``` {.markdown .reveal-demo code-preview="demo/mini/auto-animate.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/auto-animate.qmd" code-preview-title="Example slides with auto-animate"}
 ## Auto Animate {auto-animate=true}
 
 ::: {style="margin-top: 100px;"}
@@ -276,7 +276,7 @@ This example uses the `margin-top` property to move the element but internally R
 
 You can also animate between code blocks to show changes in code. For example:
 
-```` {.markdown .reveal-demo code-preview="demo/mini/auto-animate-code.qmd"}
+```` {.markdown .reveal-demo code-preview="demo/mini/auto-animate-code.qmd" code-preview-title="Example slides with an auto-animated code block"}
 ## Code Animations {auto-animate="true"}
 
 ```r
@@ -304,7 +304,7 @@ output$phonePlot <- renderPlot({
 
 Animations are not limited to changes in style. Auto-Animate can also be used to automatically move elements into their new position as content is added, removed or rearranged on a slide. All without a single line of inline CSS. For example, here the delta between the content on two slides is implicitly animated:
 
-``` {.markdown .reveal-demo code-preview="demo/mini/auto-animate-movement.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/auto-animate-movement.qmd" code-preview-title="Example slides with auto-animated movement"}
 ## Movement Animations {auto-animate=true}
 
 Animation
@@ -324,7 +324,7 @@ In situations where automatic matching is not feasible you can give the objects
 
 Here's an example where we've given several blocks a matching ID since automatic matching has no content to go on. This example also makes use of some additional animation attributes (`auto-animate-easing` and `auto-animate-delay`), which we'll describe in the next section.
 
-``` {.markdown .reveal-demo code-preview="demo/mini/auto-animate-stack.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/auto-animate-stack.qmd" code-preview-title="Example slides with auto-animated element matching"}
 ## {auto-animate=true auto-animate-easing="ease-in-out"}
 
 ::: {.r-hstack}
@@ -386,7 +386,7 @@ Note that fragments as discussed here are a relatively advanced form of incremen
 
 The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment. For example:
 
-``` {.markdown .reveal-demo code-preview="demo/mini/fragments.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/fragments.qmd" code-preview-title="Example slide with fragments"}
 ::: {.fragment}
 Fade in
 :::
@@ -436,7 +436,7 @@ Here are all of the available fragment classes:
 
 Multiple fragments can be applied to the same element sequentially by wrapping it. The following example will fade in the text on the first step, turn it red on the second and partially fade out on the third:
 
-``` {.markdown .reveal-demo code-preview="demo/mini/fragments-nested.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/fragments-nested.qmd" code-preview-title="Example slide with nested fragments"}
 ::: {.fragment .fade-in}
 ::: {.fragment .highlight-red}
 ::: {.fragment .semi-fade-out}
@@ -470,7 +470,7 @@ Custom effects can be created by specifying CSS styles for `.fragment.effectname
 
 For example, the following defines a fragment style where elements are initially blurred but become focused when stepped through.
 
-``` {.markdown .reveal-demo code-preview="demo/mini/fragments-custom.qmd"}
+``` {.markdown .reveal-demo code-preview="demo/mini/fragments-custom.qmd" code-preview-title="Example slide with custom fragments"}
 ::: {.fragment .custom .blur}
 First item to be unblurred
 :::

diff --git a/docs/presentations/revealjs/index.qmd b/docs/presentations/revealjs/index.qmd
@@ -34,19 +34,19 @@ If you have a slide that has more content than can be displayed on a single fram
 
 1.  Use the `.smaller` class to use a smaller typeface so that more text fits on the slide. For example:
 
-    ``` {.markdown code-preview="examples/smaller.qmd"}
+    ``` {.markdown code-preview="examples/smaller.qmd" code-preview-title="Example slide with the smaller class"}
     ## Slide Title {.smaller}
     ```
 
 2.  Use the `.scrollable` class to make off-slide content available by scrolling. For example:
 
-    ``` {.markdown code-preview="examples/scrollable.qmd"}
+    ``` {.markdown code-preview="examples/scrollable.qmd" code-preview-title="Example slide with the scrollable class"}
     ## Slide Title {.scrollable}
     ```
 
 Both of these options can also be applied globally to all slides as follows:
 
-``` {.yaml code-preview="examples/scrollable-and-smaller.qmd"}
+``` {.yaml code-preview="examples/scrollable-and-smaller.qmd" code-preview-title="Example presentation with smaller and scrollable slides"}
 ---
 format:
   revealjs:
@@ -134,7 +134,7 @@ Note that when specifying this option footnotes can still be viewed while on the
 
 You can include footer text and a logo at the bottom of each slide using the `footer` and `logo` options. For example:
 
-``` {.yaml code-preview="examples/footer-and-logo.qmd"}
+``` {.yaml code-preview="examples/footer-and-logo.qmd" code-preview-title="Example presentation with a footer and logo"}
 ---
 format:
   revealjs:
@@ -147,7 +147,7 @@ format:
 
 Using `{footer=false}` on a slide heading allows to remove the presentation footer for this slide.
 
-```{.yaml code-preview="examples/no-footer-on-a-slide.qmd"}
+```{.yaml code-preview="examples/no-footer-on-a-slide.qmd" code-preview-title="Example presentation with the footer removed from one slide"}
 ---
 format:
   revealjs:
@@ -165,7 +165,7 @@ No footer is shown on this slide
 
 You can also include a custom footer per-slide by adding a footer div at the bottom of the slide. 
 
-``` {.markdown code-preview="examples/per-slide-footer.qmd"}
+``` {.markdown code-preview="examples/per-slide-footer.qmd" code-preview-title="Example slide with a custom footer"}
 ## Slide Title
 
 Slide content
@@ -191,7 +191,7 @@ You can specify the code highlighting style using the `syntax-highlighting` opti
 
 You may want to highlight specific lines of code output (or even highlight distinct lines over a progression of steps). You can do this using the `code-line-numbers` attribute of code blocks. For example:
 
-```` {.java code-preview="examples/line-highlighting-1.qmd"}
+```` {.java code-preview="examples/line-highlighting-1.qmd" code-preview-title="Example slide that highlights a range of code lines"}
 ```{.python code-line-numbers="6-8"}
 import numpy as np
 import matplotlib.pyplot as plt
@@ -208,7 +208,7 @@ plt.show()
 
 Note that you can also highlight disparate ranges of lines by separating them with a comma. For example:
 
-```` {.java code-preview="examples/line-highlighting-2.qmd"}
+```` {.java code-preview="examples/line-highlighting-2.qmd" code-preview-title="Example slide that highlights separate code lines"}
 ```{.python code-line-numbers="7,9"}
 import numpy as np
 import matplotlib.pyplot as plt
@@ -225,7 +225,7 @@ plt.show()
 
 Finally, you can highlight different line ranges progressively by separating them with `|`. For example, here we start by showing all lines, then progress to highlighting line 6, and finally to highlighting line 9:
 
-```` {.java code-preview="examples/line-highlighting-3.qmd"}
+```` {.java code-preview="examples/line-highlighting-3.qmd" code-preview-title="Example slide that highlights code lines step by step"}
 ```{.python code-line-numbers="|6|9"}
 import numpy as np
 import matplotlib.pyplot as plt
@@ -242,7 +242,7 @@ plt.show()
 
 You can use this same option within an executable code cell by using the `code-line-numbers` cell options:
 
-```` {.java code-preview="examples/line-highlighting-4.qmd"}
+```` {.java code-preview="examples/line-highlighting-4.qmd" code-preview-title="Example slide that highlights executable code lines step by step"}
 ```{{python}}
 #| code-line-numbers: "|6|9"
 #| fig-alt: "Spiral polar plot"
@@ -282,7 +282,7 @@ You will frequently need to customize the size of figures created for slides so
 
 Nevertheless, you will frequently need to change these defaults for a given figure. The details on how to do this vary by graphics library. Here's an example of explicitly sizing an [Altair](https://altair-viz.github.io/) plot:
 
-``` {.python code-preview="examples/executable-code-figure-size.qmd"}
+``` {.python code-preview="examples/executable-code-figure-size.qmd" code-preview-title="Example slide with a figure size set on executable code"}
 alt.Chart(cars).mark_point().encode(
     x='Horsepower',
     y='Miles_per_Gallon',
@@ -297,7 +297,7 @@ alt.Chart(cars).mark_point().encode(
 
 Unlike with ordinary documents, within Quarto presentations executable code blocks do not `echo` their source code by default (this is because often the code produces a figure that wants to occupy as much vertical space as possible). You can override this behavior using the `echo` option. For example:
 
-```` {.java code-preview="examples/code-echo.qmd"}
+```` {.java code-preview="examples/code-echo.qmd" code-preview-title="Example slide that shows code with its output"}
 ```{{python}}
 #| echo: true
 #| fig-alt: "Spiral polar plot"
@@ -343,7 +343,7 @@ See the documentation on [Execution Options](/docs/computations/execution-option
 
 You can add tabbed content to slides using the standard Quarto syntax for [tabsets](/docs/output-formats/html-basics.qmd#tabsets). For example:
 
-``` {.markdown code-preview="examples/tabset.qmd"}
+``` {.markdown code-preview="examples/tabset.qmd" code-preview-title="Example slide with a tabset"}
 ::: {.panel-tabset}
 
 ### Tab A
@@ -367,7 +367,7 @@ Slides are contained within a limited portion of the screen by default to allow
 
 All CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`. For example:
 
-``` {.markdown code-preview="examples/background-color.qmd"}
+``` {.markdown code-preview="examples/background-color.qmd" code-preview-title="Example slide with a background color"}
 ## Slide Title {background-color="aquamarine"}
 ```
 
@@ -379,7 +379,7 @@ Note that if the background color of your media differs from your presentation's
 
 All CSS gradient formats are supported, including `linear-gradient`, `radial-gradient` and `conic-gradient`.
 
-```{.markdown code-preview="examples/background-gradient.qmd"}
+```{.markdown code-preview="examples/background-gradient.qmd" code-preview-title="Example slide with a gradient background"}
 ## Slide Title {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"}
 
 ## Slide Title {background-gradient="radial-gradient(#283b95, #17b2c3)"}
@@ -399,7 +399,7 @@ By default, background images are resized to cover the full page. Available opti
 
 For example:
 
-``` {.markdown code-preview="examples/image-background.qmd"}
+``` {.markdown code-preview="examples/image-background.qmd" code-preview-title="Example slide with a background image"}
 ## Slide Title {background-color="black" background-image="https://placekitten.com/100/100" background-size="100px" background-repeat="repeat"}
 
 This slide's background image will be sized to 100px and repeated.
@@ -433,7 +433,7 @@ For example:
 
 You can always omit the title text, and specify only the slide background information:
 
-``` {.markdown code-preview="examples/background-no-title.qmd"}
+``` {.markdown code-preview="examples/background-no-title.qmd" code-preview-title="Example slides with backgrounds and no titles"}
 ## {background-color="aquamarine"}
 
 (A slide with no title)