The Reveal.js output formatter

Reveal.js for Asciidoctor.js is a popular way of creating slides with Asciidoctor.js and is available via the org.asciidoctor.js.revealjs plugin.

There are many items that can be configured on the output formatter itself.

  • Groovy

import org.asciidoctor.gradle.model5.js.formatters.AsciidoctorjsRevealjs

asciidoc {
    toolchains {
        asciidoctorjs3 { (1)
            registeredOutputFormatters {
                revealjs(AsciidoctorjsRevealjs) { (2)
                    templateDirs 'src/myAsciidocTemplate1', 'src/myAsciidocTemplate2' (3)
                    useEngine 'nunjucks' (4)
                    useEngine 'handlebars', '1.2.3' (5)
                    revealjsOptions { (6)
                    }
                }
            }
        }
    }
}
1 Currently, this is only supported for the Opal engine, which is the asciidoctorjs3 toolchain.
2 The org.asciidoctor.js.revealjs plugin adds an output formatter called revealjs.
3 Define one or more templates that can be used for conversion.
4 Adds an engine from NPM using the default version. Only ejs, handlebars, js, nunjucks and pug are supported. js is a NOOP as template-js is a built-in.
5 Adds an engine from NPM using the specified version.
6 Configures Reveal.js for Asciidoctor.js options. See below.
templateDirs must be provided, otherwise template setting will be ignored. It will auto-detect engines from the file extensions found in the template directories.

Reveal.js options

The enumerations used below are part of org.asciidoctor.gradle.model5.core.revealjs.RevealjsOptions, which has to be imported in the build script to use them.

  • Groovy

revealjsOptions{
    autoSlideInterval = 200 (1)
    autoSlideStoppable = true (2)
    backgroundTransition = 'none' (3)
    backgroundTransition =  RevealjsOptions.Transition.FADE (4)
    builtinThemeName = 'black' (5)
    builtinThemeName = RevealjsOptions.BuiltInThemes.BEIGE (6)
    controls = true (7)
    flagEmbedded = true (8)
    fragments = true (9)
    hideAddressBarOnMobile = true (10)
    keyboardShortcuts = true (11)
    loop = true (12)
    mouseWheel = true (13)
    overviewMode = true (14)
    previewLinks = true (15)
    progressBar = true (16)
    pushToHistory = true (17)
    rightToLeft = true (18)
    slideNumber = RevealjsOptions.SlideNumber.DEFAULT (19)
    slideNumber = 'h/v' (20)
    touchMode = true (21)
    transition = 'slide' (22)
    transition = RevealjsOptions.Transition.FADE (23)
    transitionSpeed = 'fast' (24)
    transitionSpeed = RevealjsOptions.TransitionSpeed.SLOW (25)
    verticalCenter = true (26)
    viewDistance = 3 (27)

    customTheme {  (28)
        uri = 'https://somewhere.example/there/is/a/revealjs/theme' (29)
        location = '/path/to/dir' (30)
        relativePath = 'my/theme' (31)
    }
}
1 Delay in milliseconds between automatically proceeding to the next slide. Disabled when set to 0 (the default). This value can still be overwritten on a per-slide basis by setting a data-autoslide attribute on a slide.
2 Stop auto-sliding after user input.
3 Transition style for full page slide backgrounds. One of none, fade, slide, convex, concave, or zoom. If not set then an internal default of FADE will be used.
4 Set the background transition via the enumeration instead.
5 Select a built-in theme. Unsets any custom theme.
6 Select a built-in theme using the enumeration instead. Unsets any custom theme.
7 Display controls in the bottom right corner.
8 Flags if the presentation is running in an embedded mode. (Contained within a limited portion of the screen).
9 Use fragments globally.
10 Hides the address bar on mobile devices.
11 Enable keyboard shortcuts for navigation.
12 Loop the presentation.
13 Enable slide navigation via mouse wheel.
14 Enable the slide overview mode.
15 Opens links in an iframe preview overlay.
16 Display a presentation progress bar.
17 Push each slide change to the browser history.
18 Change the presentation direction to be RTL.
19 Displays the slide number. Set via the RevealjsOptions.SlideNumber enumeration.
20 Displays the slide number. Set via a valid string.
21 Enables touch navigation on devices with touch input.
22 Transition style. If not set, an internal default of SLIDE will be used.
23 Set the transition style via the enumeration instead.
24 Slide transition speed. One of default, fast, or slow. If not provided, an internal default value of DEFAULT will be used.
25 Set the transition speed via the enumeration instead.
26 Vertical centering of slides.
27 Number of slides away from the current that are visible. If not set, an internal value of 3 will be used.
28 Configures a custom theme. Unsets any built-in theme.
29 Get the theme from a URL. Anything convertible to a URI can be passed.
30 Get a theme from the local filesystem. Anything convertible to a file can be used.
31 Get a theme from a path relative to the source directory. Anything convertible to a file can be used.