The HTML Presentation Framework reveal.js - The HTML Presentation Framework a framework for easily creating beautiful presentations using html

Display slide number in reveal.js printout

I have activated slideNumber for my reveal.js based slides and they show up nicely on the HTML view.

Now I would like to also show them on the PDF printout that I generate with Chrome as suggested on the documentation.

It seems that its all one large page so even header and footer display only once for all slides rather than on each slide. Is there a way to print reveal.js slides that works nicely for these sort of things?

Source: (StackOverflow)

sound transition with reveal.js

I'm learning to use reveal.js and I find it very powerful. I wonder wether it's possible to make reveal play a sound at each slide transition. I made a presentation with the auto-sliding option on and it would be usefull to have a sound when the slide changes. Can someone help me ? Thanks

Source: (StackOverflow)

How to position a background image in reveal.js?

I want to have a background image on the right hand side of one slide in a reveal.js presentation.

I added the image to the slide like this:

 <section data-background="myImage.jpg">
  // content

How can I add css styles to make it appear on the right edge of the screen?

Source: (StackOverflow)

How do I separate slides when exporting an IPython notebook to reveal.js?

When I execute an IPython notebook to a reveal.js presentation using

ipython nbconvert mynotebook.ipynb --to slides --post serve

I am getting all the content as a single slide. How do I separate my content into several slides?

presentation screenshot

I tried using --- (hinted in this video), \n\n\n and === inside the notebook (as separate cells and before my titles), but it didn't change anything. I know that for a Markdown input file in reveal.js one can set the data-separator option, but the generated html file doesn't seem to include the content as Markdown, but inlines everything using HTML tags, so I don't know how to make IPython generate new slide tags where I want them.

(I'm using IPython 1.1 installed via pip)

Source: (StackOverflow)

Fragments in reveal.js using Markdown

reveal.js supports fragments which will be shown one after another in HTML

    <p class="fragment grow">grow</p>
    <p class="fragment shrink">shrink</p>
    <p class="fragment roll-in">roll-in</p>
    <p class="fragment fade-out">fade-out</p>
    <p class="fragment highlight-red">highlight-red</p>
    <p class="fragment highlight-green">highlight-green</p>
    <p class="fragment highlight-blue">highlight-blue</p>

It supports using MarkDown instead of HTML for each slide using:

<section data-markdown>
    ## Page title

    A paragraph with some text and a [link](

But I could not find any documentation on using fragments using MarkDown. Did I miss something or is it not yet supported?

Source: (StackOverflow)

reveal.js background color choices

I've been working with reveal.js a bit and you can change the background of individual slides with something referred to as the global state as seen here in the demo.

Are there other colors besides the ones mention (-soothe, -blackout and -alert) on this slide that can be applied (hit down key in the presentation to see the colors)? If so what colors?

Source: (StackOverflow)

How to add and change fonts in reveal.js?

I'm working with reveal.js for my next presentation, I want to change the default fonts used for headings.

How can I add and change fonts in reveal.js?

Source: (StackOverflow)

Reveal.js HTML Code syntax higlighting without rendering it

Hello quick question for reveal.js users.

I am trying to show a HTML markup in my reveal.js presentation. Issue is it renders the html block within my Code syntax higlighting block so the markup can not be seen.

Is there a way around this?

example below

                <h2>Pretty Code</h2>
                            <code contenteditable>

                                <form id="demo-form" data-validate="parsley">
                                <label for="fullname">Full Name * :</label>
                                <input type="text" id="fullname" name="fullname" data-required="true" />

                                <label for="email">Email * :</label>
                                <input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

                                <label for="website">Website :</label>
                                <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                                <label for="message">Message (20 chars min, 200 max) :</label>
                                <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>


Thank you.

Source: (StackOverflow)

position:fixed in reveal.js

I am trying to make a header for my reveal.js presentation that sticks to the top of the screen. The content in the header is dynamic on a per-slide basis, so I have to place the markup within the section tag.

Apparently position:fixed does not really provide satisfying results in reveal.js if the markup is within the section tag. I can't really make out why that is exactly, but I found some info in the github repo suggesting setting the presentation size to fit the viewport size with:

Reveal.initialize {
    width: '100%',
    height: '100%',

But it still doesn't work for me - it seems the presentation is not really affected by the above. Here is a demo:

Any ideas how to solve this?

Source: (StackOverflow)

How to use server side speaker notes of reveal.js

I want to use the server side speaker notes of reveal.js so that I can use other devices to switch slides while my presentation is running on my laptop. I followed the instructions on reveal.js github page and now have a full installation.

I am able to use the speaker notes on my laptop without a problem. So I tried the server side speaker notes following these instructions. Thus when I run the server and go to localhost:1947 using a browser a popup opens which looks like the normal speaker notes page. I now have three problems:

1) My notes do not show up in the popup page. Even though they did in the normal speaker notes page.

2) If i sweep through slides in the popup page they don't change in the main page

3) The "Upcoming" section in the popup page doesn't update. But it did in the normal speaker notes.

I'm using an ubuntu 13.10 64bit system. I have node.js v0.10.26, express 2.5.8 and grunt v0.4.4 installed. I also installed using:

sudo npm install

Could this be some compatibility issue or is it me whose doing something wrong? I've never worked with node.js or so I'm not sure where to look.


I add a minimal example here. Though in order to use it you need to put it in index.html in reveal.js directory and install plugins using:

npm install

then in order to run it enter this command:

node plugin/notes-server/

you also need to have node.js and grunt installed. after running you can open the slides from localhost:1947. When you open this page a pop-up will appear which is the notes page and you should be able to change slides in the main page from there. Unfortunately I can't. index.html:

<!doctype html>
<html lang="en">

    <meta charset="utf-8">

    <title>minimal sample</title>
    <link rel="stylesheet" rel='nofollow' href="css/reveal.min.css">
    <link rel="stylesheet" rel='nofollow' href="css/theme/default.css" id="theme">


    <div class="reveal">
        <div class="slides">
                <h3>HTML Presentations Made Easy</h3>
                    <small>Created by <a rel='nofollow' href="">Hakim El Hattab</a> / <a rel='nofollow' href="">@hakimel</a></small>

                <h2>Heads Up</h2>
                    reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
                    support for CSS 3D transforms to see it in its full glory.

    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>

            dependencies: [
                { src: '', async: true },
                { src: 'plugin/notes-server/client.js', async: true }




server notes (popup)

Source: (StackOverflow)

D3.js code in Reveal.js slide

I'm trying to make D3.js work on Reveal.js slides, but I can't get it to run even the most basic snippet:

    <div id="placeholder"></div>
    <script type="text/javascript">"#placeholder").append("p").text("TEST");

Doesn't show the "TEST" word. What am I doing wrong?

Source: (StackOverflow)

execute function when certain slide appear in reveal.js

I create a presentation with this javascript framework and when certain slide is appearing I want to execute function stats(), which display some data from API every 5 seconds, but only when this slide is appearing

function stats(){                
    type: "GET",
    url: url_survey,
    dataType: "json",
    success : 
      function (data) {
      //some code to display data       
      //some code

in HTML file I have this:

<div id="stats">

how can I do it? I wrote this code, but it works always, not only when slide appear

function check(){

setInterval(function(){check()}, 2000);

Source: (StackOverflow)

R htmlwidgets with reveal.js

How can I use the great htmlwidgets (for example with reveal.js and Rmarkdown?

This mwe (not reveal.js) works:

title: "Maptest 1"
output: html_document

##  Map

```{r, echo=FALSE}
m <- leaflet()
m <- addTiles(m)
m <- addMarkers(m, lng=174.768, lat=-36.852, popup="The birthplace of R")

But this one doesn't:

title: "Maptest 2"
output: revealjs::revealjs_presentation

##  Map

```{r, echo=FALSE}
m <- leaflet()
m <- addTiles(m)
m <- addMarkers(m, lng=174.768, lat=-36.852, popup="The birthplace of R")

I re-used the example from the htmlwidgets-webpage, and the reveal.js-template is from

Source: (StackOverflow)

reveal.js print to pdf only prints the first slide?

I am trying to use the pdf export option of reveal.js as documented in the repo readme.

I have the following problems:

  • I don't see an option for layout (landscape vs portrait) in my chrome print window
  • Printing only ever prints the first slide

No idea what I've done wrong or how to troubleshoot it. I'm using the latest version of reveal.js css etc from Github (sha: 131c00689a4c7a18e5c991fc8102347e4594b5d4) on this example file.

I'm using Google-chrome Version 34.0.1847.132 on Ubuntu 14.04

Source: (StackOverflow)

Add/Remove Slides from Reveal.JS dynamically

Is it possible to add/remove slides while a presentation is running with reveal.js? To be precise, is there an API for that or maybe some dirty workaround?

Source: (StackOverflow)