如何将 CSS 样式应用于四开输出

Question

我想将样式应用于四开块输出。

我做的第一件事是将一些 CSS 属性嵌入到.outputQuarto 文档的类中，然后使用以下命令引用它：

```{r class.output="output"}
```

它有效，但我认为它不是很有效，因为我必须在每个文档中编写它。

所以我在custom.scss.output文件中编写了一个带有一些 CSS 属性的类，但现在

```{r class.output="output"}
```

不起作用。

那么我应该在哪里以及如何申报呢？

非常感谢！

Answer 1

使用 CSS 样式文件来定义四开块输出的 CSS 属性就足够了，除非您想构建自定义主题（在这种情况下，您应该使用 SCSS）

因此，在文件中编写类选择器的 CSS 属性styles.css，并使用YAML 键从四开文档文件中css引用它。styles.css

样式.css

.output {
  color: green;
  background-color: black;
}

四开文档.qmd

---
title: "Output-style"
format: 
  html:
    css: styles.css
---

```{r}
#| class-output: output

x = "hello quarto"
print(x)
1 + 1
```

You can add options to executable code like this

```{r}
#| class-output: output

2 * 2
```

现在对于 SCSS 的情况，要引用 scss 文件，您需要使用themeyaml key 而不是css.

自定义样式.scss

/*-- scss:rules --*/

.output {
  color: green;
  background-color: black;
}

四开文档.qmd

---
title: "Output-style"
format: 
  html:
    theme: output_style.scss
---

```{r}
#| class-output: output

x = "hello quarto"
print(x)
1 + 1
```

并且输出与上面类似。