reveal.js 学习笔记
2023年8月
快捷键
按 space，或者 ⬇ 进入竖向页面
按 ESC 进行全览
按 S 进入 演示模式
按 F 进入全屏
按 B 或者 . 可以暂停演示
CTRL+Shift+F 搜索，（来自插件search.js）
Alt+click(CTRL+click in Linux) 用来局部放大（来自插件 zoom.js）
一级标题
二级标题
三级标题
四级标题
正文：垂直页适合用来添加细节
地板
好了，可以上去了
⬏
无序列表
- 用 ul + li 标签
- Or here
- Or here
- Or here
有序列表
- 用 ol + li 标签
- Two is smaller than...
表格
| tr + th 标签 | 标题行 | v |
|---|---|---|
| tr + td 标签 | 单元格 | 7 |
| class="r-vstack" | 纵向排列 | 18 |
| class="r-hstack" | 横向排列 | 2 |
代码高亮
<pre><code class="javascript" data-trim data-line-numbers>
print('hello');
print('world');
</code></pre>
LaTeX
\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix} \]内部链接
例如： 这个.
FIT TEXT
横向尽量大，尽量撑满整个屏幕
FIT TEXT
r-stretch 和 r-frame
class="r-stretch" 纵向尽量大（每页只能一个）
class="r-frame" 在图片外框加个圈，使其更显眼
代码高亮+动画
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" 标记 来实现动态代码
动画
动画
动画
Slide States
<section data-state="make-it-pop"></section>
.make-it-pop {
filter: drop-shadow(0 0 10px purple);
}
Reveal.on( 'make-it-pop', () => {
console.log('✨');
});
Fragments
使用 class="fragment"
可以实现
“一步一步显示” 的效果
Fragment Styles
参考官方文档还可以设置 Fragments 的特效:
grow
shrink
fade-out
fade-right, up, down, left
fade-in-then-out
fade-in-then-semi-out
Highlight red blue green
Transition Styles
Themes
有一些主题可以选择
Black (default) -
White -
League -
Sky -
Beige -
Simple
Serif -
Blood -
Night -
Moon -
Solarized
背景
参考官方文档<section data-background="#dddddd">🐟
<section data-background-gradient=
"linear-gradient(to bottom, #ddd, #191919)">🐳
Image Backgrounds
<section data-background="image.png">Tiled Backgrounds
<section data-background="image.png"
data-background-repeat="repeat"
data-background-size="100px">Video Backgrounds
<section data-background-video="video.mp4,video.webm">... and GIFs!
背景切换
以 "zoom" 的方式切换背景，也可以是 slide 等
data-background-transition="zoom"
或者
Reveal.configure({ backgroundTransition: 'zoom' })可以把网页设置为背景
<section data-background-iframe=
"guofei.site/" data-background-interactive>