Data Attributes

You can declare custom data attributes on virtually any blocks using AsciiDoc attributes prefixed by data-. Here are a few examples:

[source,kotlin,data-lang-family=compiled]
----
println("Hello world")
----

[%interactive,data-state=in-progress]
- [ ] Dig
- [x] Plant
- [ ] Hose

[data-context=civil-rights,data-event=speech,data-date=28/08/1963]
> I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin, but by the content of their character. I have a dream today!
> -- Martin Luther King Jr. delivering the speech at the 1963 Washington D.C. Civil Rights March.

[stem,data-algebra-concept=square-root]
++++
\sqrt{37} = \sqrt{\frac{73^2-1}{12^2}} \approx \frac{73}{12} (1 - \frac{1}{2\cdot73^2})
++++

audio::flock-of-seagulls.mp3[data-license="cc-3.0"]

video::kZH9JtPBq7k[youtube,start=34,data-video-id=kZH9JtPBq7k]

Data attributes can be combined with custom JavaScript code to create more dynamic presentations.

reveal.js 6 can open an image or a video in a full-screen lightbox when you click on it. Since data attributes are passed through to the generated HTML, you can enable the lightbox with the reveal.js data-preview-image and data-preview-video attributes:

== Image lightbox

image::cat.jpg[A cute cat,height=320px,data-preview-image=images/cat.jpg]

== Video lightbox

image::video-poster.jpg[Video poster,data-preview-video=videos/demo.mp4,data-preview-fit=cover]

Clicking on the image opens the URL given as the value of data-preview-image (an image) or data-preview-video (a video) in the lightbox. Press Esc, or click on the close button, to close it.

The attribute is set on the element that wraps the image (<div class="imageblock">), not on the <img> element itself, so the URL is required: reveal.js can’t fall back to the src of the image. The URL is used as is, which means that the imagesdir attribute isn’t applied to it: specify the path relative to the generated HTML file (or an absolute URL).

You can use the optional data-preview-fit attribute to control how the media is resized to fit the lightbox: scale-down (the default), contain, cover or none. These values have the same meaning as the CSS object-fit property.

To open a web page in an iframe overlay instead, use the preview=true attribute on a link, or the link_preview attribute on an image (see :revealjs_previewLinks: in reveal.js Configuration Options).