Quarto + Revealjs：高效制作演示文稿

制作演示文稿通常有 PowerPoint、Beamer 和 revealjs 三种工具。相较前两者，revealjs在版本管理、跨浏览器显示一致性、动画交互、优美的数学公式等维度上显著优于前两者。制作精美演示文稿通常需要对其首页、主题、字体、颜色、字号、代码块、片段、演示动画、内容布局等内容进行设置，其中主题包含对字体、颜色、字号等属性统一设定。

1 演示文稿创建、隐藏及尺寸设定

1.1 演示文稿创建

在revealjs中，约定二级标题 ## 作为新演示文稿的起点，一级标题 # 将其划分不同部分或章节。当演示文稿没有标题时，可用 --- 分隔。另外可以在 yaml 通过设定 slide-level 参数来定义幻灯片层级结构，默认是层级为 2。

---
title: "演示文稿创建"
author: "青松薤谷"
slide-level: 2
format: revealjs
---

# 引言

## 研究背景

- 背景
- 典型事实

1.2 隐藏幻灯片

某种情况下，可能不希望特定幻灯片出现，可通过 visibility="hidden"实现。

## 不想出现 {visibility="hidden"}

1.3 演示文稿尺寸

所有演示文稿都有一个 normal 尺寸，即创作时所采用的分辨率。该默认 normal 尺寸为 1050×700，旨在尽可能贴合大多数笔记本电脑的宽高比。Revealjs 会根据 normal 尺寸自动对演示文稿进行等比缩放，以确保所有内容在任意显示器上都能完整呈现，同时不改变内容的宽高比或版面布局。可以通过以下选项更改幻灯片尺寸、内容周围的边距，以及设置内容缩放的幅度限制：

• width :常规宽度（默认1050）
• `height :常规高度（默认700）
• margin :内容四周应保留空白区域的显示尺寸比例（默认 0.1）
• min-scale :可应用于内容的最小缩放比例（默认 0.2）
• max-scale :可应用于内容的最大缩放比例（默认 2.0）

2 演示文稿首页

演示文稿首页通常包含背景、标题、副标题、作者及其相关信息（所属机构、邮箱、个人主页等属性）、日期、logo 和 页脚 footer，这些元素通常在 yaml 设定全局参数来生成演示文稿首页。对于页脚 footer，若某页演示文稿隐藏页脚，可以在该页设定参数 {footer=false}来实现。

• 首页背景。使用 title-slide-attributes 选项，具体属性需在选项前加上前缀data-。
  • data-background-image: 首页背景图片，设定相应的图片路径；
  • data-background-color: 设定颜色。
  • data-background-opacity: 透明度，取值范围 0-1，值越小透明度越高。
  • data-background-position: top、left、right、center、bottom 以及相对位置（如 bottom 50px right 100px）。
  • data-background-repeat: 首页背景图片重复，no-repeat（默认，不重复）、repeat：repeat-x、round、space repeat等选项。
  • data-background-size: 有 cover、 contain 和其他具体尺寸（如30%、200px 100px）选项，默认 cover。

---
title: 演示文稿创建
title-slide-attributes:
    data-background-image: title_image.png
    data-background-size: contain
    data-background-opacity: "0.5"
---

• 作者及其相关信息。具体选项参数见下方

---
author:
  - id: string
    number: number
    name:
      given: string
      family: string
      literal: string
      dropping-particle: string
      non-dropping-particle: string
    url: string
    email: string
    phone: string
    fax: string
    degrees: Phd
    orcid: string
    note: string
    acknowledgements: string
    attributes:
      corresponding: boolean
      equal-contributor: boolean
      deceased: boolean
    roles: "Conceived and designed the study"
    metadata: object
    affiliations:
      - id: string
        number: number
        name: string
        department: string
        group: string
        address: string
        city: string
        region: string
        country: string
        postal-code: string
        url: string
---

2.1 演示文稿首页居中

默认情况下，幻灯片首页是居中的，而其他所有幻灯片是顶部对齐。当然可以通过设置 center-title-slide 选项来阻止幻灯片首页居中。不过，若设置center: true，则 center-title-slide作用则被忽略。

title: 演示文稿样式
format:
  revealjs:
    center-title-slide: false

2.2 定制演示文稿首页模板

可以使用自己的模板替换默认的幻灯片首页，需要在 template-partials 指定自定义的局部模板，详细步骤看参见Template Partials

title: My Slide Show
format:
  revealjs:
    template-partials:
      - title-slide.html 

3 内容布局

3.1 多列布局

在演示文稿中使用多列是拆分内容的绝佳方式。通过 div 设定类 {.columns} 将内容分割成多列进行布局，利用属性设定各列内容属性，如宽度、文本对齐方式等。 - width：列宽度。 - style: 其中属性text-align ：left、right、justify、start、end、start、match-parent。

::: {.columns}

::: {.column width="50%"}
Left column
:::

::: {.column width="50%" style="text-align: justify;"}
Right column
:::

:::

3.2 自适应文本

另一种快速更改演示文稿布局的方法是让文本占据整个幻灯片的空间，r-fit-text 类可实现上述目的。与center 类相结合使用效果更佳，center 类可确保文本在演示文稿上垂直居中。 应用r-fit-text 会对内部所有文本应用相同字号，因此当跨多行使用时，就无法达到相同的效果。不过，该问题可以通过为每一行文本分别使用 r-fit-text 来解决。

## {.center}

::: {.r-fit-text}
超大字体
:::

3.3 与图片相结合进行布局

在演示文稿内容不多的情况下，使用一张与文字具有相似信息的图片，也是一种改变布局的手段。插入图片具有三种方式：基础用法、绝对定位和作为背景图片。 - 基础用法。详情参见quarto 官网，如 ![](elephant.png) ，可为其添加属性{fig-align="right"}。

![](elephant.png){fig-align="center"}

• 绝对定位。absolute 允许将元素放置在幻灯片上的任意位置。这些元素具有 position: absolute 属性，可以相对于幻灯片 top、left、bottom 和right边缘进行定位，同时可以控制图片尺寸width、height。在revealjs中，图片的最大尺寸是max-width: 95%;max-height: 95%,无论将 width 或 height 设置得多大，都会被 max-width 和 max-height 覆盖。当然可以通过如下设置予以取消：style="max-height: unset; max-width: unset;"。注意，任何元素都可以使用绝对定位属性。

![](image1.png){.absolute top=200 left=0 width="350" height="300"}

![](image2.png){.absolute top=50 right=50 width="450" height="250"}

![](image3.png){.absolute bottom=20 right=100 width="300" height="300"}

• 背景图片。巧妙利用背景图片阐述内容。首先为当页演示文稿设定背景图片，然后在背景图片上赋予要表达的内容。但是当背景图片较为复杂或颜色相近时，有时很难将文本放置在图片上方并保持文本的可读性，一种解决办法就是叠加一个色块，然后在上面添加文本。

## {background-image="galen-crout.jpg"}

[勇于攀登]{.absolute left="50%" top="20%" style="rotate: -10deg;"}

## {background-image="tim-marshall.jpg"}

::: {.absolute left="55%" top="55%" style="font-size:1.8em; padding: 0.5em 1em; background-color: rgba(255, 255, 255, .5); backdrop-filter: blur(5px); box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .5); border-radius: 5px;"}
勇敢

冒险
:::

3.4 堆叠

r-stack 布局类允许将多个元素居中并相互堆叠放置。此功能旨在与fragments配合使用，以实现元素的逐步显示。

::: {.r-stack}
![](yeji.png){.fragment width="450" height="300"}

![](yeji.png){.fragment width="300" height="450"}

![](yeji.png){.fragment width="400" height="400"}
:::

3.5 拉伸

r-stretch 布局辅助类允许调整某个元素（如图片或视频）的大小，以填满幻灯片中剩余的垂直空间。例如，在下面的示例中，图片将自动调整大小，以适应幻灯片标题、其前后文本之外所留出的剩余空间：

## 拉伸

这个一个野鸡图片:

![](yeji.png){.r-stretch}

该图片由AI自动生成。

对于包含单个图片的幻灯片，该图片会自动应用.r-stretch类。可以通过设置 auto-stretch: false 选项来禁用此行为。

format:
  revealjs:
    auto-stretch: false

也可以通过添加 .nostretch 类来为单张幻灯片禁用自动拉伸：

## 幻灯片标题 {.nostretch}

或者直接将 .nostretch 应用于单个图片：

![](image.png){.nostretch fig-align="center" width="800px"}

auto-stretch 只会应用于非嵌套的图片，这意味着位于特性块（如 fragments、layout panel、columns 等）或自定义 div 中的图片将被忽略。对于自定义 div，你可以通过给外层 div 添加 .r-stretch 类来选择启用自动拉伸行为。

Note自动拉伸与可滚动幻灯片的限制

当幻灯片设置为可滚动（scrollable）时，自动拉伸所用的图片尺寸计算可能无法正常工作，导致图片不显示。根据需求，有两种解决方案：

• 演示文稿级别禁用自动拉伸：设置 auto-stretch: false，然后仅在需要的图片上单独使用 .r-stretch 类。

• 在可滚动的幻灯片上添加 .nostretch 类，以禁用该幻灯片的自动拉伸功能。

3.6 选项卡集（Tabsets）

选项卡集将内容分组到多个标签页（选项卡）中，可以点击切换，见下方代码。需要注意的是，选项卡组有一个显著的缺点，即打印为PDF时只有第一个选项卡的内容可见。

::: {.panel-tabset}

### Tab A

Content for `Tab A`

### Tab B

Content for `Tab B`

:::

4 片段和增量列表

显示文稿中元素的高亮或逐步显示通常有两种方式：增量列表（incremental lists）和 片段（fragment）。

4.1 增量列表

默认情况下，演示文稿中的编号列表和项目符号列表会一次性全部显示。不过，在 yaml 中设定全局参数 incremental ，可以实现每张演示文稿中的列表会逐次显示。当然如果想对某张演示文稿列表逐项显示的话，可以去掉全局参数 incremental，通过div 设定属性 {.incremental} 和 {.noincremental}，具体就是将列表包裹在 div 中，前者是逐项显示，后者一次性全部显示。

::: {.incremental}

- content1
- content2

:::

4.2 片段

片段是一种相对高级的增量内容显示形式。带有 fragment 类的元素都会在切换到下一张幻灯片之前被逐步展示。

::: {.fragment}
淡入
:::

::: {.fragment .fade-out}
淡出
:::

::: {.fragment .highlight-red}
高亮红色
:::

::: {.fragment .fade-in-then-out}
先淡入，后淡出
:::

::: {.fragment .fade-up}
向上滑动并淡入
:::

fragment 类有如下可供选择的项：

• fade-out 初始可见，然后淡出
• fade-up 向上滑动并淡入
• fade-down 向下滑动并淡入
• fade-left 向左滑动并淡入
• fade-right 向右滑动并淡入
• fade-in-then-out 淡入，下一步淡出
• fade-in-then-semi-out 淡入，下一步淡出至 50%
• grow 放大
• semi-fade-out 淡出至 50%
• shrink 缩小
• strike 添加删除线
• highlight-red 文字变红
• highlight-green 文字变绿
• highlight-blue 文字变蓝
• highlight-current-red 文字变红，下一步恢复原色
• highlight-current-green 文字变绿，下一步恢复原色
• highlight-current-blue 文字变蓝，下一步恢复原色

4.2.1 嵌套片段

通过包裹的方式对同一个元素依次应用多个片段。以下示例将在第一步淡入文本，第二步将其变红，第三步部分淡出：

## Nested Fragments

::: {.fragment .fade-in}
::: {.fragment .highlight-red}
::: {.fragment .semi-fade-out}
淡入 > 变红 > 部分淡出
:::
:::
:::

4.2.2 片段顺序

默认情况下，片段按照在幻灯片中出现的顺序逐步显示。不过可以通过 fragment-index 属性更改显示顺序。注意，多个元素可以使用相同的索引：

## Fragment Order

::: {.fragment fragment-index=3}
第三出现
:::

::: {.fragment fragment-index=1}
首先出现
:::

::: {.fragment fragment-index=2}
第二出现
:::

4.2.3 自定义片段

可以通过为 .fragment.effectname 和 .fragment.effectname.visible 指定 CSS 样式来创建自定义效果。在演示过程中，当逐步浏览到每个片段时，会为其添加 visible 类。可以为每个片段添加一个自定义类，以告知 revealjs 不要应用其默认的淡入片段样式。

## Custom Fragments

::: {.fragment .custom .blur}
第一个将变清晰的条目
:::

::: {.fragment .custom .blur}
第二个将显示的条目
:::

5 动画

5.1 自动动画

revealjs 可以跨幻灯片自动为元素添加动画效果。只需为相邻的两张幻灯片添加 auto-animate 属性，就会在这两张幻灯片之间对所有匹配的元素进行动画过渡。

## 动画 {auto-animate=true}

:::  {style="margin-top: 100px;"}
动画变化
:::

## 动画 {auto-animate=true}

::: {style="margin-top: 200px; font-size: 3em; color: red;"}
动画变化
:::

此示例使用 margin-top 属性来移动元素，但 revealjs 内部会使用 CSS 变换（transform）来确保切换平滑。这种动画方式适用于大多数可添加动画的 CSS 属性，意味着可以对诸如 position）、font-size、line-height、color、background-color、padding 和margin等属性进行过渡动画。

5.2 代码动画

可以在代码块之间添加动画效果，以展示代码的变更。

## {auto-animate="true"}

```{.r}
data(mtcars)
head(mtcars, 10)          
str(mtcars)     
summary(mtcars) 
```

## {auto-animate="true"}

```{.r}
data(mtcars)
head(mtcars, 10)          
str(mtcars)     
summary(mtcars) 
plot(mpg ~ wt, data = mtcars, 
     main = "mpg 与车重的关系", 
     xlab = "车重（1000 lbs）", ylab = "英里/加仑",
     pch = 19, col = "darkgreen")
abline(lm(mpg ~ wt, data = mtcars), col = "red", lwd = 2)
model <- lm(mpg ~ wt + hp, data = mtcars)
```

5.3 动作动画

动画不仅限于样式变化。自动动画 Auto-Animate 还可以用于在幻灯片上添加、删除或重新排列内容时，自动将元素移动到新的位置。

## {auto-animate=true}

Animation

## {auto-animate=true}

Implicit

Animation

5.4 演示文稿切换动画

revealjs 支持幻多种类型的幻灯片切换和背景切换的动画效果，默认没有动画切换效果。

• none : 无过渡（瞬间切换）
• fade : 淡入淡出（交叉渐变）
• slide : 水平滑动
• convex : 凸角滑动
• concave : 凹角滑动
• zoom : 缩放（新幻灯片从屏幕中心放大进入）

title: 演示文稿样式
format:
  revealjs:
    transition: slide
    background-transition: fade
    transition-speed: fast

当然也可以单独为特定幻灯片页面设置动画切换效果。

## Slide Title {transition="fade" transition-speed="fast"}

## Slide Title {transition="fade-in slide-out"} 

6 代码块

Quarto HTML 代码块的大部分核心功能都可用于 revealjs 幻灯片，包括代码折叠、代码复制以及选择自定义语法高亮主题的能力。

6.1 语法高亮

在 yaml 设定 syntax-highlighting 全局参数，主题选项可参看https://quarto.org/docs/output-formats/html-code.html#highlighting，当然你可以在代码块中设定 code-line-numbers 属性实现特定行的语法高亮，而且使用竖线 | 分隔不同的行范围，从而实现逐步高亮。

6.2 代码块高度

默认情况代码块的最大高度限制为500px，超过此阈值的代码块则出现滚动。当然可以在 yaml 设定参数code-block-height 增加高度。

6.3 可执行代码块

和 quarto输出格式一样，revealjs 幻灯片同样可以包含可执行代码块的输出结果。但需要注意几点：第一就是图片大小，需要你自定义图片的尺寸，以便能够发到合适的位置；第二就是代码块显示，与与普通文档不同，在 Quarto 演示文稿中可执行代码块默认不显示其源代码，可通过设置 echo;第三就是代码结果显示的位置，默认情况下，代码结果在代码之后显示，可以用 output-location控制，具体选项包括 fragment、 slide、 column、 column-fragment。

7 其他

7.1 内容溢出

如果某张幻灯片的内容超过一个页面所能显示的范围，可以使用 div 类中的 {.smaller} 和 {.scrollable} 来缓解此问题。前者采用较小的字体，以便幻灯片能容纳更多文本。后者通过滚动来查看幻灯片中超出显示区域的内容。当然也可以在 yaml中进行全局参数设置。注意，标题幻灯片默认是居中对齐的，会导致它们无法滚动。若标题幻灯片也能滚动，需要先将其设置为非居中对齐。

7.2 旁注与脚注

旁注包含相对次要的内容，显示在幻灯片底部，使用较小且颜色较浅的字体，使用 div 类中的 aside实现，后者与前者视觉效果类似，不同的是脚注包含编号，呈现方式：在标注内容后添加 ^[footnote content] 。另外若希望脚注在文档末尾呈现，需在 yaml 中指定 reference-location: document，reference-location 有如下选项可供选择： document、 section、 margin、 block。

7.3 幻灯片背景

可以通过 background-color 、linear-gradient、radial-gradient 、 conic-gradient 单独为特定演示文稿设定背景颜色。

7.4 导航菜单

默认情况下，导航菜单位于 revealjs 左下角。点击幻灯片导航菜单，可以跳转到任意一张幻灯片。具体在 yaml 中控制参数 menu来对导航菜单进行控制，有以下选项可选： - side : 在演示文稿中菜单显示的位置，有两个选项 left 和 right，默认是前者。 - width : 菜单的宽度，有如下选项 normal、wide、 third、 half、 full，默认是 normal。 - numbers : 是否为菜单项添加幻灯片编号，有两个选项 true 和 false 。

当然也可以隐藏导航菜单。可以将 menu 设置为 false 来实现。

format:
  revealjs:
    menu:
      side: right
      width: wide

7.5 幻灯片编号

通过参数 slide-number 为幻灯片添加编号，还可以通过 show-slide-number 选项控制幻灯片编号在哪些情况下显示。slide-number 还有更多选项选择，见如下列表。show-slide-number也有可选参数 all（默认）、print、 speaker。 - c/t, 显示当前幻灯片编号/总幻灯片数（默认） - c， 仅显示当前幻灯片编号 - h/v，显示水平方向编号/垂直方向编号（适用于包含垂直嵌套幻灯片的演示） - h.v，显示水平方向编号 . 垂直方向编号

---
title: "Presentation"
format:
  revealjs:
    slide-number: true
    show-slide-number: print  # 仅在打印输出时显示
---

7.6 外部链接

在quarto中，通过 preview-links 选项可以轻松地将指向外部网站的导航融入演示文稿的流程中。可以设置全局参数进行控制，具体选项如下

• auto 仅在演示文稿处于全屏模式时预览链接（否则正常跳转）。
• true 总是预览链接。
• false 从不预览链接（默认值）。

当然也可以为单个链接单独设置此选项。

---
title: "幻灯片样式"
format:
  revealjs:
    preview-links: auto
---

[Preview](baidu.com){preview-link="true"}

[NoPreview](baidu.com){preview-link="false"}

8 主题

8.1 内置主题

revealjs内置11种主题，分别为 beige 、 blood 、 dark 、 default 、 dracula 、 league 、 moon 、 night 、 serif 、 simple 、 sky 、 solarized ，通过在 yaml 中设定参数 theme 来选择合适的主题，默认主题是 default 。当然也可以定制主题，后续会有探讨。

8.2 定制主题

可以通过将 Sass 主题文件添加到主题声明中来定制内置主题。

---
title: "演示文稿"
format:
  revealjs: 
    theme: [default, custom.scss]
---

custom.scss 文件为定制主题。见下方代码

/*-- scss:defaults --*/

$body-bg: #191919;
$body-color: #fff;
$link-color: #42affa;

/*-- scss:rules --*/

.reveal .slide blockquote {
  border-left: 3px solid $text-muted;
  padding-left: 0.5em;
}

主题文件使用 Sass（一种支持变量及其他扩展功能的 CSS 变体），并分为两个部分。

• /*-- scss:defaults --*/ 用于定义影响字体、颜色、边框等的变量（注意：变量以 $ 开头）。

• /*-- scss:rules --*/ 用于创建 CSS 规则。注意，针对 revealjs 内容的 CSS 规则通常需要使用 .reveal .slide 前缀，才能成功覆盖主题的默认样式。

8.3 scss:defaults 部分

8.3.1 颜色参数

• $body-bg :主体背景色，默认 #fff
• $body-color :主体文字颜色，默认 #222
• $text-muted :淡化文字颜色，默认 lighten($body-color, 50%)
• $link-color :链接颜色，默认 #2a76dd
• $link-color-hover :链接悬停颜色，默认 lighten($link-color, 15%)
• $selection-bg :选中文本背景色，默认 lighten($link-color, 25%)
• $selection-color :选中文本颜色，默认 $body-bg
• $light-bg-text-color :浅色背景下的文字颜色，默认 #222
• $light-bg-link-color :浅色背景下的链接颜色，默认 #2a76dd
• $light-bg-code-color :浅色背景下的代码颜色，默认 #4758ab
• $dark-bg-text-color :深色背景下的文字颜色，默认 #fff
• $dark-bg-link-color :深色背景下的链接颜色，默认 #42affa
• $dark-bg-code-color :深色背景下的代码颜色，默认 #ffa07a

8.3.2 字体参数

• $font-family-sans-serif :无衬线字体族，默认 "Source Sans Pro", Helvetica, sans-serif
• $font-family-monospace :等宽字体族，默认 monospace
• $presentation-font-size-root :根字体大小（基础字号），默认 40px
• $presentation-font-smaller :较小字体的缩放比例，默认 0.7
• $presentation-line-height :行高，默认 1.3

8.3.3 标题参数

• $presentation-h1-font-size :一级标题字号，默认 2.5em
• $presentation-h2-font-size :二级标题字号，默认 1.6em
• $presentation-h3-font-size :三级标题字号，默认 1.3em
• $presentation-h4-font-size :四级标题字号，默认 1em
• $presentation-heading-font :标题字体，默认 $font-family-sans-serif
• $presentation-heading-color :标题颜色，默认 $body-color
• $presentation-heading-line-height :标题行高，默认 1.2
• $presentation-heading-letter-spacing :标题字间距，默认 normal
• $presentation-heading-text-transform :标题文本变换，默认 none
• $presentation-heading-text-shadow :标题文字阴影，默认 none
• $presentation-heading-font-weight :标题字重，默认 600
• $presentation-h1-text-shadow :一级标题文字阴影，默认 none

8.3.4 代码块参数

• $code-block-bg :代码块背景色，默认 $body-bg
• $code-block-border-color :代码块边框颜色，默认 lighten($body-color, 60%)
• $code-block-font-size :代码块字体大小，默认 0.55em

8.3.5 行内代码参数

• $code-color :代码（行内）文字颜色，默认 var(–quarto-hl-fu-color)
• $code-bg :代码（行内）背景色，默认 transparent

8.3.6 选项卡集参数

• $tabset-border-color :选项卡组边框颜色，默认 $code-block-border-color

8.3.7 布局参数

• $border-color :通用边框颜色，默认 lighten($body-color, 30%)
• $border-width :通用边框宽度，默认 1px
• $border-radius :通用边框圆角半径，默认 3px
• $presentation-block-margin :块级元素外边距，默认 12px
• $presentation-slide-text-align :幻灯片文本对齐方式，默认 left
• $presentation-title-slide-text-align :标题幻灯片文本对齐方式，默认 center

8.4 主题核心参数选择

8.4.1 演示文稿主要部分字体

使用3个不同的 Sass 变量来控制演示文稿字体。

• presentation-heading-font: 控制每页演示文稿标题字体；

• font-family-sans-serif：控制正文的字体；

• font-family-monospace：控制等宽文本字体（包括行内代码和代码块）。

查找非本地字体最简单的方法是使用 Google Fonts。选择你想要使用的字体，点击Get embed code，找到 @import 代码，并将其放在 SCSS 文件中 /– scss:defaults –/ 部分的开头。

/*-- scss:defaults --*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

$font-family-sans-serif: 'Manrope', sans-serif;
$presentation-heading-font: 'IBM Plex Serif', serif;

8.4.2 演示文稿主要部分颜色

对于颜色，有许多可以修改的项。可以考虑设置 5 个主要的 Sass 变量。

• body-bg : 幻灯片背景色；
• body-color : 文本颜色；
• presentation-heading-color : 标题文本颜色；
• link-color : 链接颜色；
• code-color : 行内代码文本颜色。

$body-bg: #1C1C2B;
$body-color: #bac2de;
$presentation-heading-color: #cba6f7;
$link-color: #fab387;
$code-color: #89b4fa;

选择颜色时，主要关注 background colors、text colors、highlight colors、theme colors 四种类型，总颜色数控制在3-6种之间最为合适。background colors和 text colors需形成鲜明对比（如深色文本配浅色背景）。highlight colors使用1–3种颜色，必须与背景和文本色有足够差异以确保可读性；而theme colors不必与其他颜色显著区分，可以用多种相近色调来提升视觉吸引力，但所有颜色都应避免与背景、文本或其他主题色过于接近，从而保持整体清晰度与美观。

对比度。可以使用Colour contrast checker 和 [coolors]https://coolors.co/contrast-checker/580b3a-f8f8f8 两个工具检查颜色对比度，且对比度一般在10-12以上。需要注意的是，应尽量避免使用纯黑和纯白，绿色和红色也尽量不要搭配（对色盲不友好）。当然，对比度也与字体大小相关，文字越小越细，对比度就越重要。

/*-- scss:defaults --*/
$theme-darkblue: #01364C;
$theme-blue: #99D9DD;
$theme-white: #F7F8F9;
$theme-yellow: #F4BA02;

$body-bg: $theme-darkblue;
$body-color: $theme-white;
$link-color: $theme-blue;

8.4.3 演示文稿主要部分字体大小

有 5 个主要的 Sass 变量用于更改演示文稿中各项内容的大小，通常只用到其中 2-3。

• presentation-font-size-root ：改变所有内容——大多数尺寸都是基于该值计算。因此如果提高该值，其他所有内容都会随之变大。
• presentation-h1-font-size ：用于更改一级标题字体大小。
• presentation-h2-font-size ：用于更改二级标题字体大小。
• presentation-h3-font-size ：用于更改三级标题字体大小。
• presentation-h4-font-size ：用于更改四级标题字体大小。
• code-block-font-size ：用于更改代码块和代码输出大小。

$presentation-font-size-root: 40px;
$presentation-h1-font-size: 80px;
$presentation-h2-font-size: 60px;
$code-block-font-size: 0.9em;

参考文献

• Quarto revealjs,更为详细的内容可参见Quarto官网
• Slidecrafting:Making beautiful slides with reveal.js and Quarto