Reveal JS 基础

胡华平

标题页1：basic

据说这一页是title page

qmd文档输出参数

直接对单个.qmd文件进行幻灯片输出设定：

title: "Test"
author: "Kevin Hu"
format: revealjs

幻灯片区隔：两套体系

幻灯片区隔：可以直接使用heading符号#（title slide）或##（section slide）进行区隔，或者使用水平规则符---进行区隔。

当然，如果两种区隔符号规则进行混用，则会有不同的组合效应（初步测试来看，水平符号规则是要优先于标题符号规则）。

幻灯片区隔：pandoc规则

pandoc对其中的具体规则--slide-level进行了说明（可参看）。

幻灯片区隔：小结

简单地说，quarto会根据slide的heading层级，自动判定slide-level的数量。

默认情况情形下yaml参数为slide-level: 2，此时一级标题#将区分节（section）

  • 然后下面会紧跟着二级标题##（也即幻灯片标题）

  • 然后下面会紧跟幻灯片内容（content）

如果此时有三级标题###，则也仅仅只是在本页幻灯片下显示的三级标题，而不会新建幻灯片）。

标题页2：递增点击

incremental：yaml设置

incremental: true

这是无序条目

  • 无序条目1

  • 无序条目2

这是有序条目

  1. 有序1

  2. 有序2

incremental：div设置


::: {.incremental}

这是无序条目

- 无序条目1

- 无序条目2

:::

这是无序条目

  • 无序条目1

  • 无序条目2

技术流

注释：notes

在演讲者视图下可以看到该注释。敲击键盘S可查看。

::: {.notes}
Speaker notes go here.
:::

旁注：aside

旁注不会显示说明的标号。

::: aside
Some additional commentary of more peripheral interest.
:::

脚注：footnote

旁注则会显示说明的标号。可以看到对比。

::: aside
Some additional commentary of more peripheral interest.
:::

Green ^[A footnote]

Green 1

脚注：展示位置

如果要放在幻灯片文档的最末尾，则可以设定yaml为：

format:
  revealjs:
    reference-location: document

页脚footer

页脚footer：文字

format:
  revealjs:
    footer: "页脚文字"

页脚footer：图标

format:
  revealjs:
    logo: ../pic/logo/hu-text-removebg.png

页眉header

官方支持

官方的支持比较简单，具体为：

---
format:
  revealjs:
    logo: logo.png
    footer: "Footer text"
---

插件支持

github 项目（可关注参看）提供了一个extension以处理幻灯片header显示风格。当然，里面会涉及到lua语法、pandoc规则、css技术、甚至JavaScript语法等。

上述extension的使用方式：quarto add shafayetShafee/reveal-header。

reveal-header插件介绍

A very simple Quarto filter extension for revealjs output format that provides

  • Support for adding header text like footer on slides, level1 (h1) and level2 (h2) slide titles on slide header,

  • Another YAML option to add a logo on top-left side of each slides. So by using this filter, it is possible to use two logos for each slides (One by using the default logo option which adds the logo on bottom-right corner and another one by using header-logo option provided by this filter.)

reveal-header 示例

View the Demos of using this filter,

pdf导出

pdf 导出可以直接使用chrome浏览器，或者使用decktape，后者需要：

  • 使用Node version manager like nvm to install Node.js and npm

  • 使用npm安装decktape

安装1 nvm

使用git安装nvm，见官方说明，具体git命令如下：

$ git cd ~/
$ git clone https://github.com/nvm-sh/nvm.git .nvm

注意：需要在windows个人用户文件夹下进行安装。

安装2 node.js

注意要安装最新版的node.js

$ nvm install 20
$ nvm use 20

安装3 npm

参看npm文档

$ npm install -g npm

安装4 decktape

参看decktape文档

$ npm install -g decktape

decktape导出（推荐）

参看quarto问答

$ cd ~/.nvm
$ decktape d:/github/course-em/_site/slide-reveal/chpt00-revealjs-basic.html chpt00-revealjs-basic.pdf --screenshots-size=1600x900

导出pdf文件存放在C:\Users\huhua\.nvm\chpt00-revealjs-basic.pdf

浏览器导出（不推荐）

目前只支持Google Chrome浏览器（参看quarto文档）

注意：打印设置中需要：Change the Margins to None.

标题页：参考资源

网络问答

  • Adding a logo at top-left corner for all slides in quarto presentation (参看队长问答)