:author: Charles Moulliard :backend: revealjs :blog: cmoulliard.github.io :browser_history: true :description: RevealJS Template to create a beautiful HTML Slideshow :idprefix: :linkattrs: // Themes : default, beige, moon, blood, night, serif, simple, sky, solarized :revealjs_theme: default :revealjs_display_slide_number: false :revealjs_slide_vertical_alignment: false :revealjs_history: true

:twitter: cmoulliard

Getting Started with Reveal.js

Reveal.js

HTML Presentations Made Easy

+++<small>+++ Created by blog / twitter.com/{twitter}[@{twitter}]# +++</small>+++

Heads Up

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.

+++<aside class=“notes”>+++ Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard). +++</aside>+++

Vertical Slides

DOES NOT WORK AS IT IMPLIED TO HAVE A SECTION NESTED IN ANOTHER SECTION Slides can be nested inside of other slides, try pressing +++<a href=“#” class=“navigate-down”>+++down+++</a>+++.

+++ <a href=“#” class=“image navigate-down”>

<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">

</a> +++

Basement Level 1

Press down or up to navigate.

Slides

Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at slid.es[http://slid.es, window=“_blank”].

Point of View

Press ESC to enter the slide overview. Hold down alt and click on any element to zoom in on it using lab.hakim.se/zoom-js[zoom.js]. Alt + click anywhere to zoom back out.

Marvelous Unordered List

Fantastic Ordered List

numbered

. One is smaller than… . Two is smaller than… . Three!

Transition Styles

You can select from different transitions, like:

?transition=cube#/transitions[Cube] - ?transition=page#/transitions[Page] - ?transition=concave#/transitions[Concave] - ?transition=zoom#/transitions[Zoom] - ?transition=linear#/transitions[Linear] - ?transition=fade#/transitions[Fade] - ?transition=none#/transitions[None] - ?#/transitions[Default]

Themes

Reveal.js comes with a few themes built in:

?#/themes[Default] - ?theme=sky#/themes[Sky] - ?theme=beige#/themes[Beige] - ?theme=simple#/themes[Simple] - ?theme=serif#/themes[Serif] - ?theme=night#/themes[Night] +++
+++ ?theme=moon#/themes[Moon] - ?theme=solarized#/themes[Solarized]

+++<small>+++

  • Theme demos are loaded after the presentation which leads to flicker. +

In production you should load your theme in the <head> using a <link>. +++</small>+++

Global State

Set +++data-state=“something”+++ on a slide and + +++“something”+++ will be added as a class to the document + element when the slide is open. This lets you apply broader style + changes, like switching the background.

Custom Events

Additionally custom events can be triggered on a per slide basis by binding to the +++data-state+++ name.

source, java

Reveal.addEventListener( 'customevent', function() {

console.log( '"customevent" has fired' );

} );

data-background=#007777

Slide Backgrounds

Set +++data-background=“#007777”+++ on a slide to change the full page background to the given color. All CSS color formats are supported.

Put macro block with data-background attribute just before the title of the slide which corresponds to the section tag used by Reveal

“`

data-background=#007777

Slide Backgrounds

“`

data-background=“

Image Backgrounds

“`

data-background=image.png

Image Backgrounds

“`

data-background=“”, data-background-repeat=“repeat”, data-background-size=“100px”

REPEATED IMAGE BACKGROUNDS

“`

data-background=“”, data-background-repeat=“repeat”, data-background-size=“100px”

REPEATED IMAGE BACKGROUNDS

“`

data-transition=“linear”, data-background=“#4d7e65”, data-background-transition=“slide”

Background Transitions

Pass reveal.js the +++backgroundTransition: 'slide'+++ config argument to make backgrounds slide rather than fade.

data-transition=“linear”, data-background=“#8c4738”, data-background-transition=“slide”

Background Transition Override

You can override background transitions per slide by using +++[data-background-transition=“slide”].

Table

.Example

cols=“50,50”,width=“90”

|=== ^|Header1 ^|Header2

|Entry First Line 1 |Entry First Line 2

|Entry Second Line 1 |Entry Second Line 2

|Entry Last Line 1 |Entry Last Line 2

|===

data-background=#8c4738

Font Icons

  • Font Awesome icon fa-arrow-left : {icon-arrow-left}

  • Font Awesome icon fa-arrow-right : {icon-arrow-right}

  • Font Awesome icon fa-exclamation {icon-exclamation-mark}

  • Font Awesome icon fa-question {icon-question-mark}

TIP

We have defined as asciidoctor attributes the different icons to be used under the yaml config file of Hyla

  • icon-arrow-left: `<i class=“fa fa-arrow-left”></i>`

  • icon-arrow-right: `<i class=“fa fa-arrow-right”></i>`

  • icon-exclamation-mark: `<i class=“fa fa-exclamation”></i>`

  • icon-question-mark: `<i class=“fa fa-question”></i>`

The list could be extended with new Font icons. Please refer to the list of the icons available fortawesome.github.io/Font-Awesome/icons/[here].

data-background=#8c4738

Admonition

NOTE: NOTE. Lorem ipsum dolor sit amet, consectetur adipiscing.

WARNING: WARNING. Lorem ipsum dolor sit amet, consectetur adipiscing.

IMPORTANT: IMPORTANT. Lorem ipsum dolor sit amet, consectetur adipiscing.

TIP: TIP. Lorem ipsum dolor sit amet, consectetur adipiscing.

CAUTION: CAUTION. Lorem ipsum dolor sit amet, consectetur adipiscing.

Clever Quotes

These guys come in two forms, inline: “__The nice thing about standards is that there are so many to choose from __'' and block:

“__For years there has been a theory that millions of monkeys typing at random on millions of typewriters would

reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.__''

Pretty Code

source, javascript, source-highlighter=highlightjs

function linkify( selector ) {

if( supports3DTransforms ) {

  var nodes = document.querySelectorAll( selector );

  for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
    var node = nodes[i];

    if( !node.className ) {
      node.className += ' roll';
    }
  }
}

}


Courtesy of softwaremaniacs.org/soft/highlight/en/description/[highlight.js].

Intergalactic Interconnections

You can link between slides internally, #/2/3[like this].

fragments

Fragmented Views

Hit the next arrow…

To step Through


<p class=“fragment”>… to step through …</p>


+++ <ol>

<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>

</ol> +++

+++<aside class=“notes”>+++ This slide has fragments which are also stepped through in the notes window. +++</aside>+++

Fragment Styles

There's a few styles of fragments, like:

+++ <p class=“fragment grow”>grow</p> <p class=“fragment shrink”>shrink</p> <p class=“fragment roll-in”>roll-in <p class=“fragment fade-out”>fade-out <p class=“fragment highlight-red”>highlight-red <p class=“fragment highlight-green”>highlight-green <p class=“fragment highlight-blue”>highlight-blue <p class=“fragment current-visible”>current-visible <p class=“fragment highlight-current-blue”>highlight-current-blue +++

Export to PDF

Presentations can be https://github.com/hakimel/reveal.js#pdf-export[exported to PDF], below is an example that's been uploaded to SlideShare.

+++ <iframe id=“slideshare” src=“www.slideshare.net/slideshow/embed_code/13872948” width=“455” height=“356” style=“margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px” allowfullscreen> </iframe> <script>

document.getElementById('slideshare').attributeName = 'allowfullscreen';

</script> +++

Take a Moment

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen + during a presentation.

.Asciidoctor

.Reveal.js

THE END

BY hakim.se[Hakim El Hattab] & cmoulliard.github.io[Charles Moulliard]