tr + th 标签	标题行	v
tr + td 标签	单元格	7
class="r-vstack"	纵向排列	18
class="r-hstack"	横向排列	2

代码高亮+动画

 import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    ...
  );
}

代码高亮+动画

使用data-line-numbers="|4,8-11|17|22-24"，以及 script type="text/template" 标记来实现动态代码

 import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
function SecondExample() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
} import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
function SecondExample() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
} import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
function SecondExample() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
} import React, { useState } from 'react';
 
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
function SecondExample() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() =&gt; setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

动画

Auto-Animate.

动画

Slide States

 <section data-state="make-it-pop"></section>

可以用css来控制它

 .make-it-pop {
filter: drop-shadow(0 0 10px purple);
}

也可以用 javascript，打开页面时触发

 Reveal.on( 'make-it-pop', () => {
	console.log('✨');
});

Transition Styles

可以选择一些切换样式:
None - Fade - Slide - Convex - Concave - Zoom

Themes

有一些主题可以选择
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - Solarized

THE END

Parallax backgrounds

Extensive JavaScript API

Auto-progression

Custom keyboard bindings

	<pre><code class="javascript" data-trim data-line-numbers>
	print('hello');
	print('world');
	</code></pre>

	<section data-markdown>
	## 支持 Markdown

	直接写 Markdown即可
	参考 [docs](https://revealjs.com/markdown/).
	</section>

reveal.js 学习笔记

快捷键

一级标题

二级标题

三级标题

四级标题

地板

无序列表

有序列表

表格

代码高亮

LaTeX

支持 Markdown

内部链接

FIT TEXT

横向尽量大，尽量撑满整个屏幕

r-stretch 和 r-frame

代码高亮+动画

代码高亮+动画

动画

动画

动画

Slide States

Fragments

Fragment Styles

Transition Styles

Themes

背景

🐟

🐳

Image Backgrounds

Tiled Backgrounds

Video Backgrounds

... and GIFs!

背景切换

更多的效果展示

THE END

	import React, { useState } from 'react';

	function Example() {
	const [count, setCount] = useState(0);

	return (
	...
	);
	}