Skip to content

Instantly share code, notes, and snippets.

@cmoulliard

cmoulliard/asciidoctor-revealjs

Created January 10, 2014 09:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cmoulliard/8349231 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cmoulliard/8349231 to your computer and use it in GitHub Desktop.
Download ZIP
Asciidoctor example for SlideShow HTML5 presentation using RevealJS
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]
@cmoulliard
Copy link
Copy Markdown
Author

cmoulliard commented Jan 10, 2014

Procedure to create from an asciidoctor file a RevealJS Slideshow HTML 5 presentation :

git clone git@github.com:cmoulliard/hyla.git
cd hyla
gem build hyla.gemspec
gem install hyla-1.0.2.pre.gem

# Delete previously directory/project created
rm -rf ~/hyla/MyRevealSlideShow
cd ~/hyla

# Create a new blank project for the slideshow
hyla new --blank MyRevealSlideShow

# Create an asciidoc file slideshow_revealjs.ad in this project
hyla create --t slideshow --a revealjs --d MyRevealSlideShow

# Generate HTML content
cd MyRevealSlideShow
hyla generate --backend revealjs --s . --d generated_content --r adoc2slide

# Start local HTTP Server
hyla serve -P 4000 -H localhost -b /hyla/ --out_dir ~/hyla/MyRevealSlideShow/generated_content/ 

# Open Project in your browser
open http://localhost:4000/hyla/slideshow_revealjs.html

# Enjoy !

@arulrajnet
Copy link
Copy Markdown

arulrajnet commented Nov 29, 2017

The steps are not working or not updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment