Quarto 幻灯片

用 Reveal.js 雕琢出赏心悦目的交互式幻灯片

各位好

本幻灯片展示, 借助 Quarto 与 Reveal.js 所能实现的功能 :

• 代码、 LaTeX 数学公式

• 将 代码块、计算结果 整合至幻灯片中

• 以图像、视频等作为幻灯片背景

• 转场效果与动画

• 启用滚动视图 Scroll View 进行浏览

… 等等其他功能

漂亮代码

• 提供超过 20 种语法高亮主题

• 默认主题针对无障碍访问做了优化

# 为 Shiny 应用定义服务器函数
function(input, output) {
  
  # 填充我们为绘图预留的位置
  output$phonePlot <- renderPlot({
    # 绘制条形图
  })
}

代码动画

• 提供超过 20 种语法高亮主题

• 默认主题针对无障碍访问做了优化

# 为 Shiny 应用定义服务器函数
function(input, output) {
  
  # 填充我们为绘图预留的位置
  output$phonePlot <- renderPlot({
    # 绘制条形图
    barplot(WorldPhones[,input$region]*1000, 
            main=input$region,
            ylab="Number of Telephones",
            xlab="Year")
  })
}

行高亮

• 高亮特定行以突出强调

• 可逐条高亮更多行

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

执行代码

library(ggplot2)
ggplot(mtcars, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess")

LaTeX 公式

使用 MathJax 将方程渲染成 HTML

\begin{gather*}
a_1=b_1+c_1\\
a_2=b_2+c_2-d_2+e_2
\end{gather*}

\begin{align}
a_{11}& =b_{11}&
  a_{12}& =b_{12}\\
a_{21}& =b_{21}&
  a_{22}& =b_{22}+c_{22}
\end{align}

\[\begin{gather*} a_1=b_1+c_1\\ a_2=b_2+c_2-d_2+e_2 \end{gather*}\] \[\begin{align} a_{11}& =b_{11}& a_{12}& =b_{12}\\ a_{21}& =b_{21}& a_{22}& =b_{22}+c_{22} \end{align}\]

列布局

将内容排布到不同宽度的多列中，本页文字更小 {.smaller} :

《Motor Trend》汽车道路测试

该数据取自 1974 年《Motor Trend》美国杂志, 包含 32 辆汽车的燃油消耗以及 10 项设计设计与性能指标

	mpg	cyl	disp	hp	wt
Mazda RX4	21.0	6	160	110	2.620
Mazda RX4 Wag	21.0	6	160	110	2.875
Datsun 710	22.8	4	108	93	2.320
Hornet 4 Drive	21.4	6	258	110	3.215
Hornet Sportabout	18.7	8	360	175	3.440
Valiant	18.1	6	225	105	3.460

逐条显示列表

列表可以设置为逐条显示 :

• First item
• Second item
• Third item

插入停顿pauses可以让其他类型的内容也逐条显示

pauses 是Reveal.js的一个语法

前一段， 后面要有空行， 之后是一些带着空格的点

. . .

前面要有空行， 后以段

片段

使用片段(fragment)实现文字的逐条显示与动画 :

淡入

淡入的同时向上滑动

淡入的同时向左滑动

淡入后半透明淡出

划线删除

红色高亮

幻灯片背景

在幻灯片上设置 background 属性即可改变背景颜色(支持所有 CSS 颜色格式)

可通过 background-transition 选项使用不同的背景过渡效果， 可用 none、fade、slide、convex、concave、zoom

图片背景

你还可以将以下内容用作幻灯片背景 :

• 图片: background-image

• 视频: background-video

• 内嵌框架: background-iframe

绝对定位

将图片或其他元素精确定位到指定位置

自动动画

使用 Auto-Animate 在幻灯片之间自动动画化匹配的元素

自动动画

使用 Auto-Animate 在幻灯片之间自动动画化匹配的元素

幻灯片过渡效果

接下来的几张幻灯片将使用slide 过渡效果切换

过渡效果	说明
none	无过渡(默认,瞬间切换)
fade	交叉淡入淡出
slide	水平滑动
convex	以凸角滑动
concave	以凹角滑动
zoom	缩放进入的幻灯片,使其从屏幕中心放大呈现

标签页 Tabsets

• 绘图
• 数据

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160.0	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160.0	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108.0	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258.0	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360.0	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225.0	105	2.76	3.460	20.22	1	0	3	1
Duster 360	14.3	8	360.0	245	3.21	3.570	15.84	0	0	3	4
Merc 240D	24.4	4	146.7	62	3.69	3.190	20.00	1	0	4	2
Merc 230	22.8	4	140.8	95	3.92	3.150	22.90	1	0	4	2
Merc 280	19.2	6	167.6	123	3.92	3.440	18.30	1	0	4	4
Merc 280C	17.8	6	167.6	123	3.92	3.440	18.90	1	0	4	4
Merc 450SE	16.4	8	275.8	180	3.07	4.070	17.40	0	0	3	3
Merc 450SL	17.3	8	275.8	180	3.07	3.730	17.60	0	0	3	3
Merc 450SLC	15.2	8	275.8	180	3.07	3.780	18.00	0	0	3	3
Cadillac Fleetwood	10.4	8	472.0	205	2.93	5.250	17.98	0	0	3	4
Lincoln Continental	10.4	8	460.0	215	3.00	5.424	17.82	0	0	3	4
Chrysler Imperial	14.7	8	440.0	230	3.23	5.345	17.42	0	0	3	4
Fiat 128	32.4	4	78.7	66	4.08	2.200	19.47	1	1	4	1
Honda Civic	30.4	4	75.7	52	4.93	1.615	18.52	1	1	4	2
Toyota Corolla	33.9	4	71.1	65	4.22	1.835	19.90	1	1	4	1
Toyota Corona	21.5	4	120.1	97	3.70	2.465	20.01	1	0	3	1
Dodge Challenger	15.5	8	318.0	150	2.76	3.520	16.87	0	0	3	2
AMC Javelin	15.2	8	304.0	150	3.15	3.435	17.30	0	0	3	2
Camaro Z28	13.3	8	350.0	245	3.73	3.840	15.41	0	0	3	4
Pontiac Firebird	19.2	8	400.0	175	3.08	3.845	17.05	0	0	3	2
Fiat X1-9	27.3	4	79.0	66	4.08	1.935	18.90	1	1	4	1
Porsche 914-2	26.0	4	120.3	91	4.43	2.140	16.70	0	1	5	2
Lotus Europa	30.4	4	95.1	113	3.77	1.513	16.90	1	1	5	2
Ford Pantera L	15.8	8	351.0	264	4.22	3.170	14.50	0	1	5	4
Ferrari Dino	19.7	6	145.0	175	3.62	2.770	15.50	0	1	5	6
Maserati Bora	15.0	8	301.0	335	3.54	3.570	14.60	0	1	5	8
Volvo 142E	21.4	4	121.0	109	4.11	2.780	18.60	1	1	4	2

交互式幻灯片

在演示文稿中加入 Jupyter widgets 和 htmlwidgets 小部件

交互式幻灯片

利用 Observable 和 Shiny 把演示文稿变成应用。 使用组件布局(component layout)摆放输入与输出控件

viewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: "天赋权重" })
viewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: "颜值权重" })
viewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: "最低名气门槛" })

import { plotActors } from './actors.js';
plotActors(actors, talentWeight, looksWeight, minimum)

预览链接

不打断演示流程即可跳转到超链接

使用 preview-links 选项, 将链接以 iframe 形式在幻灯片上方打开。 点击下面的链接即可体验 :

百度地图: 让出行更简单

主题

10 套内置主题 或 自定义主题 {target=“_blank”}

便捷导航

快速跳转到幻灯片的其它部分

点击幻灯片左下角菜单进行切换， 或者按 mm 弹出

可以按 gg 打开 “Jump To Slide” 弹窗, 输入幻灯片编号或标题快速跳转

黑板

自由手绘与幻灯片批注

点击左下角的黑板按钮， 在反面写画， 也可以按 bb

点击左下角的批注按钮， 直接在正面写画, 也可以按 cc

总览

按 oo 切换总览模式， 按 左左 或 右右 切换

为了可以观察到上图的细节, 可以按住 AltAlt 并点鼠标左键

演讲者视图

按 ss(或点击 > Tools > Speaker View) 打开演讲者视图。 本页包含给主持人用的 提示词 ， 所以可以打开看看 ：

主持人用的 提示词 ：

1. 说明用途

2. 说明该如何实现

滚动视图

按 rr (或 > Tools > Scroll View Mode) 打开滚动视图

现在就可以在这张幻灯片上试试， 你会在右侧看到滚动条, 可以用鼠标滚轮向下滚动切换幻灯片

滚动视图的行为可以通过 scroll-view 配置项进行调整

编写工具

RStudio 包含了 Presentation in Viewer Pane, 调试起来更快速、便捷

更多内容…

• 触控 (优化演示文稿在移动端表现良好, 滑动即可切换幻灯片)

• 页脚与 Logo (可为每张幻灯片单独指定自定义页脚,或隐藏全局页脚)

• 自动播放幻灯片 (无需任何用户操作,即可自动逐页播放)

• 多路同步 (让观众可在自己的手机、平板或笔记本电脑上跟随你所控制的演示文稿)