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

Question

添加CSS样式颜色为绿色后

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

​

​

qmd文件如下所示：

---
format: revealjs
---

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

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

Answer 1

如何用风格展示表现力

自定义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时，在标题上设置的内联样式设置为all部分。这可以用html格式复制，而不仅仅是revealjs。

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

因此，这种情况也发生在revealjs格式上。它在可视化编辑器中正确显示，因为我们模拟结果。