Skip to content

Instantly share code, notes, and snippets.

@dongwq

dongwq/asciidoctor-revealjs

Forked from cmoulliard/asciidoctor-revealjs
Created August 14, 2014 18:17
Show Gist options
  • Save dongwq/2fc56cbbbdbf29e0fd1c to your computer and use it in GitHub Desktop.
Save dongwq/2fc56cbbbdbf29e0fd1c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
asciidoctor-revealjs
:description: RevealJS Template to create a beautiful HTML Slideshow
:backend: revealjs
:author: Charles Moulliard
:twitter: cmoulliard
:blog: http://cmoulliard.github.io
// Themes : default, beige, moon, blood, night, serif, simple, sky, solarized
:revealjs_theme: default
:linkattrs:
:idprefix:
= Getting Started with Reveal.js
== Reveal.js
HTML Presentations Made Easy
+++<small>+++
Created by {blog}[{author}] / http://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 http://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 http://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:
link:?transition=cube#/transitions[Cube] -
link:?transition=page#/transitions[Page] -
link:?transition=concave#/transitions[Concave] -
link:?transition=zoom#/transitions[Zoom] -
link:?transition=linear#/transitions[Linear] -
link:?transition=fade#/transitions[Fade] -
link:?transition=none#/transitions[None] -
link:?#/transitions[Default]
== Themes
Reveal.js comes with a few themes built in:
link:?#/themes[Default] -
link:?theme=sky#/themes[Sky] -
link:?theme=beige#/themes[Beige] -
link:?theme=simple#/themes[Simple] -
link:?theme=serif#/themes[Serif] -
link:?theme=night#/themes[Night] +++<br>+++
link:?theme=moon#/themes[Moon] -
link:?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 <code><head></code> using a <code><link></code>.
+++</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="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png"]
== Image Backgrounds
```
[data-background=image.png]
== Image Backgrounds
```
[data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png", data-background-repeat="repeat", data-background-size="100px"]
== REPEATED IMAGE BACKGROUNDS
```
[data-background="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png", 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"].
== 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 http://softwaremaniacs.org/soft/highlight/en/description/[highlight.js].
== Intergalactic Interconnections
You can link between slides internally, link:#/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 link: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="http://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.
== Stellar Links
.Asciidoctor
- http://http://asciidoctor.org/[Asciidoctor]
- https://github.com/asciidoctor[Asciidoctor Source code on GitHub]
.Reveal.js
- http://lab.hakim.se/reveal-js[Reveal.js demo]
- https://github.com/hakimel/reveal.js[Reveal.js Source code on GitHub]
== THE END
BY http://hakim.se[Hakim El Hattab] & http://cmoulliard.github.io[Charles Moulliard]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment