Css 在revealjsQuarto中定义一类反背景的幻灯片

发布于10月20日

我想把一些幻灯片倒过来.值得注意的是，我想要1级幻灯片(这些幻灯片默认有<h1>个1级标题)反转 colored颜色 :例如，白色和黑色.

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

定义一个类.inverse，并且
在幻灯片页眉中指定背景 colored颜色和.inverse级

例如，在与演示文稿关联的style.scss文件中包括以下内容:

.inverse h1 {
   color: white;
 }

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

# Level 1 header {.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