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.
Top comments (0)