# Stunning Presentations with Asciidoctor and RevealJS

In the [previous post][1], we quickly saw the power of [Asciidoctor][2], 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][3]

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][4]

Pressing <kbd>Esc</kbd> 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][5], 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][6]

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

[1]: https://blog.teamnexus.in/blog/2022/06/03/asciidoctor-a-writers-swiss-army-knife/ "AsciiDoctor - A Writer's Swiss Army Knife"
[2]: https://asciidoctor.org "Asciidoctor"
[3]: https://revealjs.com/ "RevealJS"
[4]: https://rprabhu.github.io/stunning-presentations/presentation.html "Stunning Presentation"
[5]: https://github.com/rprabhu/stunning-presentations "Presentation Source"
[6]: https://docs.asciidoctor.org/reveal.js-converter/latest/ "Asciidoctor RevealJS documentation"
[7]: https://bentolor.github.io/java9to13/#/ "Power Catchup"