HTML presentation framework reveal.js and why I am a big fan?
Tags: html, javascript, presentations
Published: 2019-12-31 11:54:10

---
title: HTML presentation framework reveal.js and why I am a big fan?
published: true
description: HTML presentation framework reveal.js and why I am a big fan?
tags: html, javascript, presentations,
cover_image: https://i.imgur.com/G5fQRw4.jpg
canonical_url: https://ranvir.xyz/blog/making-a-presentation-in-reveal-js/
---

This post was first posted on [my blog.](https://ranvir.xyz/blog/making-a-presentation-in-reveal-js/)

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/project1.html#/)
* [https://ranvir.xyz/presentations/slide2.html#/](https://ranvir.xyz/presentations/slide2.html#/)
* [https://ranvir.xyz/presentations/mathjax.html#/](https://ranvir.xyz/presentations/mathjax.html#/)
* [https://ranvir.xyz/presentations/csi.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 skeptical 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 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.](https://github.com/hakimel/reveal.js/)

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 of all download the unzipper by using this command.

`sudo apt-get install unzip`

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

`unzip file.zip -d destination_folder`

Otherwise, if you prefer, you can `fork` the code from the https://revealjs.com/

After unzip 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.

{% gist https://gist.github.com/singh1114/47444f83e62a50160d78791720c461c6.js %}


You can do a whole 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 room 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](https://tinyurl.com/) using one of the services out there. Finally, I shared the link with everyone in the room.

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