在revealjs/Quarto中定义一类具有反色背景的幻灯片

Question

我想要一些幻灯片反转。值得注意的是，我想要 1 级幻灯片（默认情况下带有

<h1>

1 级标题）反色：例如黑底白字。

这可以通过以下方式实现：

1. 定义一个类

   .inverse

   ，并且
2. 在幻灯片标题中指定背景颜色和

   .inverse

   类

例如，将其包含在与演示文稿关联的

style.scss

文件中：

.inverse h1 {
   color: white;
 }

并使用以下方法使幻灯片反转

# Level 1 header {.inverse background-color="black"}

这有效。但是，它需要为每张幻灯片手动指定背景和类别，我希望将其反转。有没有一种方法可以全局设置，这样大括号的内容就不是必需的，并且所有 1 级幻灯片都会自动反转？

Answer 1

您可以使用 Pandoc Lua 过滤器 自动使用

inverse

类和

background-color="black"

来自动使用所有 1 级标头。

MWE

---
title: "Level 1 header"
format: revealjs
keep-md: true
filters: [bg_style.lua]
---

```{css, include=FALSE}
.inverse h1 {
   color: white;
 }
```


## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

# Level 1 header

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

# Level 1 header

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

bg_style.lua

function Header(el)
    if el.level == 1 then
      table.insert(el.classes, "inverse")
      el.attributes["data-background-color"] = 'black'
      return el
    end
end