Reveal.js

啥是Reveal.js?

下載reveal.js

html:5

<!--head-->
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">

<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">

<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
    if( window.location.search.match( /print-pdf/gi ) ) {
	var link = document.createElement( 'link' );
	link.rel = 'stylesheet';
	link.type = 'text/css';
	link.href = 'css/print/pdf.css';
	document.getElementsByTagName( 'head' )[0].appendChild( link );
    }
</script>

<!--body-->
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>

Reveal.js doesn't rely on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:

Reveal.initialize({
    dependencies: [
        // Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
        { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

        // Interpret Markdown in <section> elements
        { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
        { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

        // Syntax highlight for <code> elements
        { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

        // Zoom in and out with Alt+click
        { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },

        // Speaker notes
        { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },

        // Remote control your reveal.js presentation using a touch device
        { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } },

        // MathJax
        { src: 'plugin/math/math.js', async: true }
    ]
});

Dependencies

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

Markup

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>

Markdown

<section data-markdown>
    <script type="text/template">
    <!-- .slide: data-background="#ea9999" -->
        Markdown content
    </script>
</section>

Slide Attributes

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.

<section data-background = "#007777" >
    <h2>All CSS color formats are supported, like rgba() or hsl().</h2>
</section>

IMAGE BACKGROUNDS

<section data-background="image.png">
<!-- http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg -->

REPEATED IMAGE BACKGROUNDS

<section data-background="image.png" data-background-repeat="repeat" data-background-size="500px">

The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (<section id="some-slide">):

<a href="#/2/2">Link</a>
<a href="#/some-slide">Link</a>

<a href="#" class="navigate-left">
<a href="#" class="navigate-right">
<a href="#" class="navigate-up">
<a href="#" class="navigate-down">
<a href="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide -->
<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->

Internal links

Fragments

<section data-markdown>
    <script type="text/template">
        - Item 1 <!-- .element: class="fragment" data-fragment-index="1" -->
        - Item 2 <!-- .element: class="fragment" data-fragment-index="2" -->
    </script>
</section>

Element Attributes

highlight individual elements

<section>
    <p class="fragment grow">grow</p>
    <p class="fragment shrink">shrink</p>
    <p class="fragment roll-in">roll-in</p>
    <p class="fragment fade-out">fade-out</p>
    <p class="fragment current-visible">visible only once</p>
    <p class="fragment highlight-current-blue">blue only once</p>
    <p class="fragment highlight-red">highlight-red</p>
    <p class="fragment highlight-green">highlight-green</p>
    <p class="fragment highlight-blue">highlight-blue</p>
</section>

Multiple fragments

<section>
    <span class="fragment fade-in">
        <span class="fragment fade-out">I'll fade in, then out</span>
    </span>
</section>

 // Display controls in the bottom right corner
    controls: true,

 // Display a presentation progress bar
    progress: true,

 // Display the page number of the current slide
    slideNumber: false,

 // Transition style
    transition: 'default', // default/cube/page/concave/zoom/linear/fade/none

 // Transition speed
    transitionSpeed: 'default', // default/fast/slow

 // Transition style for full page slide backgrounds
    backgroundTransition: 'default', // default/none/slide/concave/convex/zoom

 // Parallax background image
    parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

 // Parallax background size
    parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

Configuration

The global presentation transition is set using the transition config value. You can override the global transition for a specific slide by using the data-transition attribute:

<section data-transition="zoom">
    <h2>This slide will override the presentation transition and zoom!</h2>
</section>
<section data-background-transition="slide" data-background="#4d7e65">
    <h2>This slide will override the presentation background transition and slide!</h2>
</section>
<section data-transition-speed="fast">
    <h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>

Slide Transitions

Reveal is configured with highlight.js for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted. When the data-trim attribute is present surrounding whitespace is automatically removed.

<section>
    <pre><code data-trim>
        function test() {
          console.log("notice the blank line before this function?");}
    </code></pre>
</section>

Code syntax highlighting

<section data-markdown>
    <script type="text/template">
```
function test() {
  console.log("notice the blank line before this function?");
}
```
    </script>
</section>