使用 Quarto 制作幻灯片

Create beautiful interactive slide decks with Reveal.js

杨志宏

Quarto 简介

前置知识

会用命令行执行特定功能，如winget install quarto。
会用VS Code编辑器的基本功能。
掌握Markdown基本语法。

Quarto 的定位

Quarto 是一个面向科研、技术人员的开源出版工具，用户可使用Markdown语法书写内容，Quarto可将文本文档转化为多种格式，如docx、pdf、html等等。与reveal.js结合，可以快速生成可在线发布的演示文档。

内置了多种代码高亮样式
使用\(\LaTeX\)生成数学公式，例如：\(E = mc^{2}\)
可在演示文档中，通过代码生成图片或执行计算
在演示文档中，使用画笔工具进行讲解
打印为PDF

原理

Quarto 整合了多个开源工具，如Zotero、Pandoc、Python、R、Latex等等，使得研究技术人员能实现学术创作、交流的文档生成需求。

flowchart LR
    A[.qmd] --> B(Jupyter)
    A --> F(Knitr)
    B --> C[.md]
    F --> C
    C --> D(Pandoc)
    D --> E[.pdf]
    D --> G[.html]
    D --> H[.docx]
    D --> I[.epub]
    D --> J[.pptx]

图 1: Quarto 文档转化原理

使用 Quarto 创作文档

代码高亮

Quarto 支持 100 多种代码的高亮显示，例如Python：

```python
import dash
print('hi!')
```

显示效果如下：

import dash
print('hi!')

代码 1: Customers Query

SELECT * FROM Customers

Then we query the customers database (代码 1).

执行代码

使用{}可以执行代码内容，进而生成图片或交互页面等内容。默认情况下，使用{}标记的代码，只会得到运行结果，如果想显示代码并且获取运行结果，需要设置echo为true，即在代码块中增加#| echo: true。

分栏排版

:::: {.columns}

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

::: {.column width="60%"}
Right column
:::

::::

使用类 .columns可以创造一个容器，在这个容器中，通过{.column width="60%"}指定分栏及宽度。

Left column

Right column

表格

表格可以使用Markdown的语法手工生成，也可以通过代码自动生成。

表格 1: My Caption

Col1	Col2	Col3
A	B	C
E	F	G
A	G	G

See 表格 1 。

页面注释

使用脚注^[]及 footer 区块可以在演示页面底部增加注释性内容。

- Green ^[A footnote]
- Brown
- Purple

::: footer
使用 footer 区块增加注释内容
:::

Green ¹
Brown
Purple

设定背景

Reveal.js支持以颜色、图片、视频、页面作为背景。

设定颜色背景

通过在标题后面增加background-color属性，设定颜色值为背景色。例如：

### 设定颜色背景 {background-color="#E68C4C"}

设定图片背景

在标题后增加{background-image="" background-repeat="repeat"} 等内容，可以指定背景图片以及图片重复方式、大小、位置等信息。

设定视频背景

可以指定某个、或多个视频作为演示页面的背景，还可以设置大小、透明度、循环、静音等选项。

### 设定视频背景 {background-video="" background-video-loop="true" background-video-muted="true"}

设定外部页面为背景

在标题后增加background-iframe属性，可以以iframe的方式引入页面作为背景。

设置文档首页背景

可以通过title-slide-attributes来指定图片、视频、外部页面等作为演示文档首页的背景。

---
title: My Slide Show
title-slide-attributes:
    data-background-image: /path/to/title_image.png
    data-background-size: contain
    data-background-opacity: "0.5"
---

交叉引用

要使用交叉引用，就要在章节、图、表、代码块、公式等内容在生成时，增加唯一性标签，例如#fig-plot。引用时使用@fig-plot即可。

![Elephant](elephant.png){#fig-elephant}
See @fig-elephant for an illustration.

交叉引用的名称都可以修改，例如,可将默认的列表修改为代码：

crossref:
    lst-title: 代码
    lst-prefix: 代码

引用与注释

要引用文献，需要提供文献信息、引用样式（可选）、引用位置(Danesi 2004)以及参考文献所在位置。

文献信息应存放在类似references.bib的文件中，然后在front matter中使用bibliography属性指定文件位置。
```
bibliography: ../../references.bib
```
引用文献的语法为[@xxxx]
参考文献的插入位置，通过::: {#refs} :::设定

注释可通过脚注的方式实现。

演示工具

Reveal.js 提供了粉笔、画笔、演讲者视角等与PPT类似的演示工具。

可以使用快捷键，或者点击详情图标，打开对应功能。

定制样式

样式控制机制

Quarto文档的样式，可通过front matter + CSS + theme进行设置。

lang: zh
title-slide-attributes:
    data-background-video: https://oss-yangjh.oss-cn-chengdu.aliyuncs.com/video/ink-bg.mp4
    data-background-video-loop: true
format:
  revealjs: 
    slide-number: true
    theme: ../assets/styles/mytheme.scss
    chalkboard: 
      buttons: false
    preview-links: auto
    logo: ../assets/images/xbmu-text.png

例如上面的front matter，就指定了首页的背景以及整体的样式方案等等。详细设置参见Quarto、Reveal.js的官方文档。

自定义Reveal.js样式

Quarto 支持使用SCSS进行总体样式的设置，例如：

/*-- scss:defaults --*/
$font-family-sans-serif: 'Source Sans Pro', 'PingFang SC', Arial, 'Heiti SC', 'Microsoft YaHei', sans-serif;
$presentation-font-size-root: 36px;
$presentation-line-height: 1.5;
$presentation-heading-font-weight: bold;
$presentation-heading-line-heigh: 2;
$body-color: rgba(74, 81, 112, 1);
$code-block-bg:#f1f3f5;
$link-color: #42affa;
$code-bg: #f1f3f5;

参数含义详见：https://quarto.org/docs/reference/formats/presentations/revealjs.html

进阶设置

自定义模版

无论是pdf、docx还是reveal.js的输出形式，Quarto都提供了定制机制，详见https://quarto.org/docs/presentations/revealjs/advanced.html。

插件

Quarto 还提供了一些插件，用以增强演示的效果。

参考文献

Danesi, Marcel. 2004. Messages, Signs, and Meanings: A Basic Textbook in Semiotics and Communication. Toronto: Canadian Scholars’ Press.

脚注

A footnote