Exploring more about Reveal-md

In my previous blog, I told about installation part of reveal-md and how to make presentation using it. Today I am going to explain about some modifications done in that presentation.

  • Now, We need to make a file saved with filename.json having properties defined in it which we want to apply in our presentation.

“controls”: “true”,
“progress”: “true”,
“transition”: “zoom”,
“autoSlide”: ‘5000’,
“backgroundTransition”: “slide”,
“parallaxBackgroundImage”: “pt.jpg”,
“parallaxBackgroundSize”: “2100px 900px”

You can write different transitions and other things as per your choice.

Json file: JavaScript Object Notation. It is a syntax for storing and exchanging data in the style we want..

  • If you want to put different background images to some of the slides, you can refer below:


<!- – .slide: data-background=”./you.jpg” – ->

Here you.jpg is my image. You need to write this line in the starting of slide.

Also for a vertical slide you need to write – – – -(4 hiphens) after a slide is completed.

  • The next term I am gonna discuss here is about Speaker Notes.

You can enable this feature by using a line starting with NOTE. It can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven’t written any notes. Press the ‘s’ key on your keyboard to open the notes window. It starts a timer also.


eg. NOTE: The upcoming Slide

  • This Show lists of Markdown files in current directory:


  • You can change themes using command:

reveal-md slides.md – -highlightTheme github

reveal-md slides.md – -theme solarized

  • Print Support

reveal-md slides.md – -print slides

This will create a pdf of the slides. YOu need to install phantomjs for using this feature.

PhantomJS is a scripted, headless browser used for automating web page interaction. It provides a Javascript API enabling automated navigation, screenshots.

  • By default presentation will start on port 1948. But we can start it on other ports also using command:

reveal-md slides.md – -port 8888

  • You can add image in the slide using :


Here start.png is the image and you need to put images and md file in same directory.

  • To set background colour and specific transition to particular slide

<!- – .slide: data-background=”green” data-background-transition=”fade” – ->

  • To control speed of transition

<!- – slide: data-transition-speed=”slow” – ->

You can use slow/fast/default

  • You can add transitions to text also.

<p class=fragment shrink>Hie</p>

There are many other like:

fragment fade-out

fragment grow

fragment visible only once

fragment blue only once

fragment highlight-current-blue

fragment highlight-red

fragment highlight-green

fragment highlight-blue

fragment current-visible

  • To set size of image

<img src=”imp.gif” style=”width: 600px;”/>

  • Unordered List


<li class=”fragment grow”><p style=”text-align:left;”>To channelize the knowledge and the energy of youth</p></li>


  • Color

<h2><span style=”color:rgb(220,54,54)”>Functions</span> of NewGen IEDC</h2>

  • List

<ul><li><span style=”color:rgb(220,54,54)”>Funding Mechanism</span>


<li class=”fragment”>DST sponsored Faculty Development Programme (FDP) in entrepreneurship development</li>

<li class=”fragment”>5000 sq.ft of dedicated space</li>


You can see presentation here

You can download iedc.md file from here


2 thoughts on “Exploring more about Reveal-md

  1. Pingback: Up & Downs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s