如何在 Quarto 幻灯片中更改文本颜色？

Question

在将CSS样式颜色添加为绿色后，

编辑器使标题1变为绿色，但在RStudio幻灯片预览中，标题1后面的文本是绿色的，但标题1不是绿色的。

qmd文件长这样：

---
format: revealjs
---

我想改变标题文本的颜色，因此我在CSS样式下写了color:green，但这会更改标题后面的文本而不是标题文本本身。

如果我想更改任何一个特定幻灯片标题的颜色，我需要做出什么改变？

- koliii

---

你是怎么改变颜色的？如果你使用了CSS，是内联的吗？还是块级的？还是单独的CSS文件？你正在使用主题吗？如果是，是哪一个？（一个可重现的问题将会更快地得到更好的答案...请查看：制作可重现的R问题。） - Kat

亲爱的@Kat，感谢您的建议，我进一步编辑了问题。希望这样会有所帮助。 - koliii

Answer 1

如何为Quarto幻灯片演示文稿添加样式

自定义Quarto幻灯片演示文稿的最佳方法是使用.scss文件，以提供默认主题之外的新规则。有关详细信息，请参见自定义主题

---
title: "example"
format: 
  revealjs:
    theme: [default, style.scss]
---

## Nalanda Academy 

Hello

## Slide 2

Quarto

您可以使用SASS变量更改一个或多个主题的默认值：

/*-- scss:defaults --*/
$presentation-heading-color: green;

/*-- scss:rules --*/

您可以使用常规的CSS规则，例如更加局限于幻灯片标题。

/*-- scss:defaults --*/
$custom-col: green;

/*-- scss:rules --*/

.reveal section h2 {
  color: $custom-col;
}

我们强烈推荐使用自定义主题来修改默认CSS。

关于内联样式问题

您可以在HTML元素上使用内联样式，这应该是有效的。但是，您可能已经发现了一个Pandoc的问题，它被Quarto使用。当使用--section-divs时，在标题上设置的内联样式被设置为整个部分。这可以在HTML格式中复制，而不仅仅是在revealjs中。

quarto pandoc -t html -f markdown -s --section-divs -o test.html test.qmd

同样，revealjs格式也会出现这种情况。在可视化编辑器中，它显示正常，因为我们模拟了结果。

- cderv

Answer 2

最好的样式方式已经由@cderv通过使用自定义的style.scss提供。

不幸的是，有时候我匆忙而懒惰，只使用内联代码。使用html的<p>或<span>（span不会换行）来仅对你想要的段落或单词进行样式设置。

例如：

Install the following extensions (in <span style="color:cyan;">_extensions</span> folder, on Win 11 path is `C:\Users\username\Documents\_extensions`):

呈现如下：

- Claudiu Papasteri