Reveal.js

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
  </script>
</section>

Code Slide

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

Unordered List Slide

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

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
  </script>
</section>

Syntax

Markup

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>
  • 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

Markdown

  • 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](https://github.com/hakimel/reveal.js#markdown).

    ```
    <section data-markdown>
      ## Markdown support

      For those of you who like that sort of thing.
      Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
    </section>
    ```
  </script>
</section>
  • 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:
      <ul><li>1</li><li>2</li></ul>
    • Ordered lists:
      <ol><li>1</li><li>2</li></ol>

Internal Links

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

Fragments

  • 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

Images

  • Insert images with <img src="thing.png"> tag
  • Can wrap image in link element <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
  • Make an image the background slide by including in section tag data-background="http://path.to.jpg"
  • 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

Code

  • 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

Navigation

  • 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.

Transitions

  • 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>.

Quote

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.
<section> 
  <section> 
    <h2>Mr. Scott Video</h2> 
  </section> 
  <section> 
    <iframe class="stretch" data-autoplay src="http://www.youtube.com/embed/v9kTVZiJ3Uc" frameborder="0" allowfullscreen></iframe> 
  </section> 
</section>

Configuration

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

References