From Colettapedia
Jump to: navigation, search

Markdown Slide Templates

Title Slide

<section data-markdown id="title_slide">
  <script type="text/template">
# Big heading
## subtitle
### Christopher Coletta

Code Slide

<section data-markdown id="">
  <script type="text/template">
import sys
print sys.path

Unordered List Slide

<section data-markdown id="ulist_slide">
  <script type="text/template">
## Unordered list slide
- Item 1
- Item 2
- Item 3

Ordered List Slide

<section data-markdown id="olist_slide">
  <script type="text/template">
## Ordered List Slide
1. Item 1
2. Item 2
3. Item 3



<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
  • Section elements can have an id="slide_name" to allow for direct links, e.g., <a href="#/slide-name">Link</a>
  • section meta tags data-state, data-background, data-background-repeat, data-transition


  • Github-flavored markdown
  • add the data-markdown attribute, and wrap the elements in a <script type="text/template">
<section data-markdown>
  <script type="text/template">
    ## Markdown support

    Instructions available [here](

    <section data-markdown>
      ## Markdown support

      For those of you who like that sort of thing.
      Instructions and a bit more info available [here](
  • Use HTML comments to change slide attributes or to declare list items to be fragments:
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->

Use Regular HTML

  • em,
  • table, caption, thead, tr, th, tbody, tr, td
    • style="text-align: right;" left or center
  • lists
    • Unordered lists:
    • Ordered lists:

Internal Links

  • in the href, use #/id: <a href="#/some-slide">Link</a>


  • Every element with the class fragment will be stepped through before moving on to the next slide
  • Fragment transitions include grow, shrink, roll-in, fade-out, current-visible, highlight-current-blue, highlight-red, highlight-green


  • Insert images with <img src="thing.png"> tag
  • Can wrap image in link element <a class="image" href="" target="_blank">
  • Make an image the background slide by including in section tag data-background=""
  • Can also wrap img tag in figure element, using element figcaption to label

Keyboard Bindings

  • press b to pause the presentation, make the screen go blank
  • esc or o to go into overview mode
  • fullscreen mode is f
  • s to view notes


  • use the code/code tags to change text styling to code
  • insert text "data-trim contenteditable" in the code element to get pretty editable code blocks with pretty print


  • Any element that is a member of class navigate- (plus left, right, up, down, prev, next) will function like hitting that navigation, be it text or an image
    • prev and next are the next vertical or horizontal.


  • cube, page, concave, zoom, linear, fade, none, default

Built-in Reveal.js Themes

  • Default, sky, beige, simple, serif, night, moon, solarized
  • load your theme in the <head> using a <link>.


PDF export

  • navigate to the presentation adding ?print-pdf to the end of the URL. This loads the slides using the print-pdf css stylesheet
  • Destination -> Save as PDF
  • Layout = landscape
  • Margins = None

Embedded Media

  • To embed a YouTube video, use an iframe
  • Haven't figured out how to enable the controls, so put it in another vertical slide and use attribute data-autodisplay to make it play -- scroll down when ready to view.
    <h2>Mr. Scott Video</h2> 
    <iframe class="stretch" data-autoplay src="" frameborder="0" allowfullscreen></iframe> 


  • Reveal.configure({ slideNumber: true });Turn on slide numbering