================================================= sphinxjp.themes.revealjs ================================================= .. revealjs:: sphinxjp.themes.revealjs :title-heading: h2 :subtitle: REVEAL.JS presentation style theme for Sphinx :subtitle-heading: h3 .. rv_small:: Created by `tell-k `_ / `@tell-k `_ .. revealjs:: 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. .. rv_note:: 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). .. revealjs:: .. revealjs:: Vertical Slides Slides can be nested inside of other slides, try pressing |down_link|. .. image:: images/arrow.png :target: "" :class: navigate-down .. |down_link| raw:: html down .. revealjs:: Basement Level 1 Press down or up to navigate. .. revealjs:: Basement Level 2 Cornify .. image:: images/cornify.gif :target: http://cornify.com :width: 280 :height: 326 .. revealjs:: Basement Level 3 That's it, time to go back up. .. raw:: html Up arrow .. revealjs:: Slides Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at `http://slid.es `_. .. revealjs:: Point of View Press **ESC** to enter the slide overview. Hold down alt and click on any element to zoom in on it using `zoom.js `_. Alt + click anywhere to zoom back out. .. revealjs:: Works in Mobile Safari Try it out! You can swipe through the slides and pinch your way to the overview. .. revealjs:: Marvelous Unordered List * No order here * Or here * Or here * Or here .. revealjs:: Fantastic Ordered List #. One is smaller than... #. Two is smaller than... #. Three! .. revealjs:: Tabular Tables .. list-table:: :header-rows: 1 * - Item - Value - Quantity * - Apple - $1 - 7 * - Lemonade - $2 - 18 * - Bread - $3 - 2 .. revealjs:: Markdown support :data-markdown: For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown). ``` .. revealjs:: Markdown support :data-markdown: For those of you who like that sort of thing. Instructions and a bit more info available[here](https://github.com/hakimel/reveal.js#markdown). ``` .. revealjs:: External Markdown :data-markdown: _static/external.md :data-separator: ^\n\n\n :data-separator-vertical: ^\n\n :data-separator-notes: ^Speaker: .. revealjs:: Transition Styles :id: transitions You can select from different transitions, like: `Convex `_ - `None `_ - `Fade `_ - `Slide `_ - `Concave `_ - `Zoom `_ - .. revealjs:: Themes :id: themes reveal.js comes with a few themes built in: .. raw:: html Black (default) - White - League - Sky - Beige - Simple
Serif - Night - Moon - Solarized .. revealjs:: Global State Set :code:`data-state: "something"` on a slide and :code:`"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. .. revealjs:: Custom Events :data-state: customevent Additionally custom events can be triggered on a per slide basis by binding to the :code:`data-state` name. .. rv_code:: Reveal.addEventListener( 'customevent', function() { console.log( '"customevent" has fired' ); }); .. revealjs:: .. revealjs:: Slide Backgrounds :data-background: #007777 Set :code:`data-background: #007777` on a slide to change the full page background to the given color. All CSS color formats are supported. .. image:: images/arrow.png :target: "#" :class: image navigate-down :width: 178 :height: 238 :alt: "Down arrow" .. revealjs:: Image Backgrounds :data-background: _images/arrow.png .. rv_code:: .. revealjs:: :data-background: image.png; .. revealjs:: Repeated Image Backgrounds :data-background: _images/arrow.png :data-background-repeat: repeat :data-background-size: 100px .. rv_code:: .. revealjs:: :data-background: image.png :data-background-repeat: repeat :data-background-size: 100px .. revealjs:: Background Transitions :data-transition: linear :data-background: #4d7e65 :data-background-transition: slide Pass reveal.js the :code:`backgroundTransition: 'slide'` config argument to make backgrounds slide rather than fade. .. revealjs:: Background Transition Override :data-transition: linear :data-background: #8c4738 :data-background-transition: slide You can override background transitions per slide by using :code:`data-background-transition: slide`. .. revealjs:: Clever Quotes These guys come in two forms, inline: |quote_text| and block: |blockquote_text| .. |quote_text| raw:: html “The nice thing about standards is that there are so many to choose from” .. |blockquote_text| raw:: html
“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.”
.. revealjs:: Pretty Code .. rv_code:: 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 `highlight.js `_. .. revealjs:: Intergalactic Interconnections You can link between slides internally, `like this <#/2/3>`_. .. revealjs:: .. revealjs:: Fragmented Views .. rst-class:: fragment Hit the next arrow... .. raw:: html
  1. any type
  2. of view
  3. fragments
.. rv_note:: This slide has fragments which are also stepped through in the notes window. .. revealjs:: Fragment Styles There's a few styles of fragments, like: .. rst-class:: fragment grow grow .. rst-class:: fragment shrink shrink .. rst-class:: fragment roll-in roll-in .. rst-class:: fragment fade-out fade-out .. rst-class:: fragment highlight-red highlight-red .. rst-class:: fragment highlight-green highlight-green .. rst-class:: fragment highlight-blue highlight-blue .. revealjs:: Spectacular image! .. image:: images/meny.png :target: http://lab.hakim.se/meny/ :width: 320 :height: 299 :alt: Meny .. revealjs:: Export to PDF Presentations can be `exported to PDF `_, below is an example that's been uploaded to SlideShare. .. raw::html .. revealjs:: 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. .. revealjs:: Stellar Links * `Try the online editor `_ * `Reveal.js Source code on GitHub `_ * `sphinxjp.themes.revealjs Source code on GitHub `_ .. revealjs:: THE END :title-heading: h2 :subtitle-heading: h3 :subtitle: BY tell-k