: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¶ ↑
-
No order here
-
Or here
-
Or here
-
Or here
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 < 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
orperiod
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.Stellar Links¶ ↑
.Asciidoctor
-
github.com/asciidoctor[Asciidoctor Source code on GitHub]
.Reveal.js
-
github.com/hakimel/reveal.js[Reveal.js Source code on GitHub]
THE END¶ ↑
BY hakim.se[Hakim El Hattab] & cmoulliard.github.io[Charles Moulliard]
-
-
- data-background=“
- data-background=“
- data-background=“
-