Reveal.js
Jump to navigation
Jump to 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-markdownattribute, 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>
- Unordered lists:
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
- 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
- q element
- blockquote element
- cite="http://nottobeplaigiarized.com"
PDF export
- navigate to the presentation adding
?print-pdfto 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-autodisplayto 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
