Stunning Presentations with Asciidoctor and RevealJS

In the previous post, we quickly saw the power of Asciidoctor, how it could enhance the documentation, writing and many other features.

One of the other great features is its ability to create stunning HTML presentations along with another utility called RevealJS

Below is the sample presentation that is an asciidoctor markup file.

= Stunning Presentations
Prabhu R
:imagesdir: images
:title-slide-background-image: sea.jpg
:title-slide-transition: fade
:title-slide-transition-speed: fast
:experimental: true

== A Great Story

image::galaxy.jpg[background, size='cover']
Press kbd:[s] for Speaker View that displays notes  

[.notes]
--
* tell anecdote
* make a point
--

[transition='convex']
== Transition Convex

This slide has a `convex` effect

[background-color="gray"]
[transition='zoom']
== Transition Zoom

This slide has a `zoom` effect,

[background-color="teal"]
[transition='zoom']
== Vertical Slides

This is a Vertical slide,  click kbd:[↓] to see vertical slides

[background-color="crimson"]
[transition='slide']
=== Vertical Slide 1

Vertical slide 1

[background-color="brown"]
[transition='slide']
=== Vertical Slide 2

Vertical slide 2

[background-video="orca.mp4",options="loop,muted"]
[transition='concave']
== Background Video

Background looping video

[%notitle]
[transition='concave']
== THE END

image::end.jpg[background, size=cover]

To see how this stunning it gets rendered, visit here

Pressing Esc shows the thumbnail view of all the slides. Clicking on any of the slides jumps to that slide

The complete source is available in GitHub, and can be used as a starter template for your presentations

With a little of CSS knowledge more amazing effects can be brought it to the presentations. For more details look at the asciidoctor-revealjs site

Benjamin Schmid has an even more amazing presentation, a nice example of what asciidoctor and revealjs combination could produce.