reveal.js

View Github Repository Open presentation in a new window

ShawnHuang

See all presentation from ShawnHuang

reveal.js

0 0

reveal.js

On Github ShawnHuang / reveal.js

Write a slides with Reveal.js

Here we use markdown syntax

Created by Shawn Huang / @_shawnhuang

Layout

## Title

content

content

Two Columns

Column 1

<div markdown="1" 
class="left-column">
</div>

Column2

<div markdown="1" 
class="right-column">
</div>

<div style="clear:both;" />

Column 1

Image

Image

One

Two

Three

Fragments

  • text<!-- .element: class="fragment" data-fragment-index="7" -->
  • fragment
  • grow
  • shrink
  • fade-out
  • current-visible
  • highlight-red 
  •   <div markdown="1" class="fragment"
           data-fragment-index="2"
           style="position:absolute;
           top:300px;right:100px;width:20%;">
  ![test](name.jpg)
  </div>

Shortcuts

  • overview

    • 按 Esc 即可

  • speaker note

    • 按 s 即可

      Note:
做筆記區塊

  • pause

    • 按 b 即可
做筆記區塊

Data-state

data-state="something"

Reveal.addEventListener( 'customevent', function() {
        console.log( '"customevent" has fired' );
        } );
}

Background

<!-- .slide: data-background="#dddddd" -->

Background with image

<!-- .slide: data-background="bg.jpg" 
data-background-repeat="repeat" data-background-size="100px"-->

Background with Videos

<!-- .slide: data-background-video="https://.../*.mp4,https://.../*.webm"
data-background-color="#000000" -->

Background transition

<!-- .slide: data-transition="slide" 
data-background="#4d7e65" data-background-transitin="zoom" -->

Background transition

<!-- .slide: data-transition="slide"
data-background="#4d7e65" data-background-transitin="zoom" -->

Code

```js
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';
            }
        }
    }
}
```

List

  • test
  • test
  • test
- test
- test
- test

Order List

test test test 
1. test
2. test
3. test

Table

a b c d 
|center  |left  |
|:------:|:-----|
|c       |d     |

Quote

“text”

> &ldquo;text&rdquo;

Math

$$x = {-b \pm \sqrt{b^2 -4ac} \over 2a}$$

$$x = {-b \pm \sqrt{b^2 -4ac} \over 2a}$$
1
Write a slides with Reveal.js Here we use markdown syntax Created by Shawn Huang / @_shawnhuang