-
-
Save marcellodesales/b3dc5faf8f87b6de2aab to your computer and use it in GitHub Desktop.
Asciidoctor example for SlideShow HTML5 presentation using RevealJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :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 < 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