Creating Awesome Presentation using RevealJS..
<iframe> or add our own custom behavior in our presentation. Reveal.js comes with a broad range of features including nested slides, Markdown support, Auto-Animate, PDF export, speaker notes and syntax highlighted code.
How to start with RevealJS ?
To start with RevealJS , we have to create an empty folder ,after that open it with Visual Studio, after that clone the latest updated git repo of RevealJS.
$ git clone https://github.com/hakimel/reveal.js.git
Move to the reveal.js folder and install dependencies.
$ cd reveal.js && npm install
Now we will go through the code base:
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
reveal.js actually config our reveal object or in simple word our presentation. We can refer to the documentation of RevealJS for more details. plugin contains the third party plugin setups like highlight for code highlight, markdown for creating slide using external markup files ,etc. node_modules will be created when we do npm i , demo.html is the html file , which contains a presentation on Reveal Js which is having all the features provides by Reveal.JS, It’s a good reference for starting with RevealJS. And We have created our code in index.html. Now we will see our index.html file.
So in index.html we are creating our presentation. Before going to the full detailed explanation of the code , We need to know some basic syntax of how we create each slides of our presentation. The presentation markup hierarchy needs to be
.reveal > .slides > section where the
section element represents one slide and can be repeated indefinitely. If you place multiple
section elements inside of another
section they will be shown as vertical slide. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence.
So inside html tag we have created the head tag which contains meta tag , for meta data, title for our project title, and link will contain all the css files we will be using in our presentation. reset.css contains browser specific styles, reveal.css contains presentation styles and Black.css is for theme styles, we want to keep the black as our theme color or background color .monokai.css is the styles for highlight plugin which is used for highlighting syntax code. Now comes body, As we mentioned .reveal>.slides>section , we have created a div with class name reveal, inside that slides and then section, each section will be a slide for our presentation.
So We are creating a presentation on Overview of Medium Profile, Actually I have created this presentation to cover all the features of RevealJS, In first slide there will be image , title and creator details. On the second we have added animation for including code highlights. Our second slide will be having sub category defined by 1/0/0 , initially It will show all the code line highlighted , when we click on the next arrow it will show 4th line , 8,9,10,11 lines highlighted.
<code class=”hljs” data-trim data-line-numbers=”|4,8–11">
this line actually means first highlight all the lines and then on the next slide it make only 4, 8,9,10,11 lines highlighted, RevealJS uses plugin called highlight for this feature. On the next slide we have implemented vertical slide , if we wrapper several section with a single section , those sections acts as a vertical slides and the main section will be the root slides. So there are two section inside a single section, means those section will act as vertical slides. We can add styles on animation by adding styles on data-auto-animate-easing parameter of section, these are all the pre-defined reveal classes ,for more details we can check the documentation. We have added animation to the next consecutive slides as well. We can also create slides using markdown text, we have to just add data-markdown property to the section tag .RevealJS also support creation of slides using external markdown files for that it uses markdown plugin. There is another feature called fragments, means the appearance of the text can be controlled by clicking on the next arrow or arrow controllers of our presentation. We can also add styles on the fragment , means we can also define how the text should appear on our presentation , from top , bottom, should fade out , fade in etc. We can change the style on transition in between of our presentation, like by default ,it sets to none ,on clicking on the options like Fade or Slide etc. we will append ?transition=slide#/transitions to our slide url , which will change transition style of our presentation. We can also add background color to our slides by passing color on the data-background props of section. In RevealJS we can also use image as our custom controller of the slide, like if we want to slide our presentation to down we will wrap it with anchor tag and add the class navigate-down. We can add background Image on slides, We can also repeat a image in our background of slides by adding data-background-repeat= ‘repeat’. And most significantly we can add video and website link as well in slide background by adding the links on the data-background-video and data-background-iframe props on section respectively. RevealJS also provides useful features for the presenter , It provides a special comments section for each slide which will be visible to presenter only while presenting, this feature is called notes features, RevealJS uses notes plugin for the implementation. A presenter can also pause presentation by pressing B and vice versa. Now let’s see the final Presentation:
The HTML presentation framework | reveal.js
Documentation and demos for the open source reveal.js HTML presentation framework.
Creating Presentation using RevealJS GitHub is home to over 50 million developers working together to host and review…