# nodePPT Demo

### 三水清

## 目录

- 这里是目录。。
- 要显示的slide标签要加上class:slide 哦
- pc测试socket功能，注意session哦~
- 手机测试socket功能，注意两者是否在同一网络环境哦~

<slide>这一页slide并不显示

## 按条显示

### 一步一步显示list

下面的信息隐藏，使用[↓]键来显示

- 要显示这样的按条显示功能
- 父节点class设置为build
- 则所有的子节点会按条显示

下面的信息也是隐藏，使用[↓]键来显示

- 渐隐渐现
- 鼠标滑上fade的那条试试↑

## 快捷键：

- h：高亮代码
- o：概览模式
- p：画笔
- c：清除笔迹
- 方向键：切换页面
- n：显示笔记（限控制页面）
- q：开启qrcode，用于socket手机控制时扫码

## 小字体

按键H显示高亮：使用 (`<b>`)

    <script type='text/javascript'>
      // Say hello world until the user starts questioning
      // the meaningfulness of their existence.
      function helloWorld(world) {
        for (var i = 42; --i >= 0;) {
          alert('Hello ' + String(world));
        }
      }
    </script>

## Code Slide (Smaller Font)

    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
    for (var i = 42; --i >= 0;) {
    alert('Hello ' + String(world));
    }
    }

    <style>
    p { color: pink }
    b { color: blue }
    </style>

    <!DOCTYPE html>
    <html>
    <head>
    <title>My Awesome Page</title>
    </head>
    <body>
    <p>Hello world</p>
    <body>
    </html>

## 支持socket和postMessage两种方式控制

socket适合手机和电脑互动

- 有摇一摇下一页哦

postMessage适合一机双屏

- 受google的slide启发，改写的
- 剩下的页面就不多说了，样式全部是来自google slide template
- 哦，对了，切换效果很好多玩法哦~具体看下scss文件
- 哦，还有incallback/outcallback/prload多种好玩功能哦

## 这个页面会触发incallback函数

同理：也有data-outcallback哦~

还有 preload 来预加载资源

- Point I wanted to make #1
- Point I wanted to make #2
- Point I wanted to make #3
- Example link in notes.

Remember to say this tag line!

## Slide with Speaker Notes

Press 'N' to toggle speaker notes.

## Slide with Image

## Slide with Image (Centered horz/vert)

## Table Option A

### Subtitle Placeholder

| Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | --- | ---
Row 1 | placeholder | placeholder | placeholder | placeholder
Row 2 | placeholder | placeholder | placeholder | placeholder
Row 3 | placeholder | placeholder | placeholder | placeholder
Row 4 | placeholder | placeholder | placeholder | placeholder
Row 5 | placeholder | placeholder | placeholder | placeholder

## Table Option A (Smaller Text)

### Subtitle Placeholder

| Column 1 | Column 2 | Column 3 | Column 4
--- | --- | --- | --- | ---
Row 1 | placeholder | placeholder | placeholder | placeholder
Row 2 | placeholder | placeholder | placeholder | placeholder
Row 3 | placeholder | placeholder | placeholder | placeholder
Row 4 | placeholder | placeholder | placeholder | placeholder
Row 5 | placeholder | placeholder | placeholder | placeholder

## Table Option B

### Subtitle Placeholder

Header 1 | placeholder | placeholder | placeholder
Header 2 | placeholder | placeholder | placeholder
Header 3 | placeholder | placeholder | placeholder
Header 4 | placeholder | placeholder | placeholder
Header 5 | placeholder | placeholder | placeholder

## Slide Styles

- class="red"
- class="red2"
- class="red3"
- class="blue"
- class="blue2"
- class="blue3"
- class="green"
- class="green2"

- class="green3"
- class="yellow"
- class="yellow2"
- class="yellow3"
- class="gray"
- class="gray2"
- class="gray3"
- class="gray4"

I am centered text with a
and
button.

## Segue Slide

### Subtitle Placeholder

## Full Image (with Optional Header)

This is an example of quote text.
Name
Company

## Slide with Iframe

## <Thank You!>

## 参考资料

- Powered By nodePPT