Reveal.js is an HTML presentation framework that can help you to create awesome presentations for your talk or simple knowledge transfer session in your class.

I have created a number of presentations using reveal.js.

Here are the links:

• https://ranvir.xyz/presentations/project1.html#/
• https://ranvir.xyz/presentations/slide2.html#/
• https://ranvir.xyz/presentations/mathjax.html#/
• https://ranvir.xyz/presentations/csi.html#/

Prologue (How I came to know about reveal.js)

So, during my time at college, I had to deliver a presentation to a group of students and teachers from a special student cell regarding one of the emerging technologies of those times.

My mentor at that time suggested me to use reveal for creating the presentation. I was sceptical in the beginning but as soon as I got the grip of it, I loved it.

I went home and thought that it would be a difficult task but in the end, I ended up doing it just in two hours.

Setting up reveal.js

All you need to run reveal powered presentation in your local system is to have JavaScript up and running and if you are reading this post, you definitely have it running.

All you have to do is to go to reveal.js GitHub page and download the latest version of the code on the website.

Here is the link for reveal.js GitHub repository.

The downloaded file would be a zip file. If in windows, open the file simply by double-clicking it.

If in Linux use these commands in the terminal to open the file. First download the unzipper by using this command.

Then use this code to unzip the file by giving the name of the destination folder.

Otherwise, if you prefer, you can fork the code from the https://revealjs.com/. Click on the fork button or clone to repo to your local.

After unzipping, open the folder and you will find an index.html file inside.

Creating presentations using reveal.js

Open this file in your text editor. Inside the body, tags delete every section.

Now create each section using the beginning and ending section tag. Each section is equivalent to one slide.

Here is the reference of one equivalent slide.

You can do a lot of things using reveal.js presentation creator. You can create a style of your own if you want to.

Epilogue (Delivering the reveal.js presentation)

So, there were somewhere around 100-200 students and teachers in the hall where I was delivering the presentation. The stage was at a good height, and I was going to show a good number of charts in my presentation.

Before jumping on to the stage, I hosted the presentation on to GitHub pages website and created a short link using one of the services out there. Finally, I shared the link with everyone in the hall.

Everyone opened the link on their phones and were able to look at the chart more clearly.

Creating presentation using reveal.md

Webpro created markdown presentation generator on the same lines of reveal.js. All you have to do in case of reveal.md is to write markdown and it will convert itself to reveal.js presentation.

It is very useful and easy to use as markdown is fairly easy to use.

To use reveal.md you will have to install it.

After installing all you will have to do is write markdown in a markdown file.

--- is used to create a new slide.

Finally, you can run reveal-md command to run the presentation in the browser.

Generating PDFs/ Screenshots of the HTML presentations

Sometimes, people share their presentation in a PDF format with their audience so that they can get it printed and go through the presentation whenever they want.

I found this awesome HTML presentation PDF convertor, decktape. All you have to do is to install it locally and you will be good to go.

Also, during the writing of this article decktape was not working with Node version 12 for me. Please track the issue here.

Apply the following command to create PDF of your presentation.

There are a lot of other options you might want to try. Also, using black background for your presentation PDF can waste a lot of ink, so you might want to change that to something else.

Please subscribe to the blog for more such updates and leave your comments if you are using something similar or you don’t like something like with this post.