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)