我想将样式应用到Quarto块输出.

我做的第一件事是在Quarto文档中的类.output中嵌入一些CSS属性,然后使用以下命令引用它:

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

它很有效,但我认为效率不是很高,因为我必须在每个文档中编写它.

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

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

不管用.

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

非常感谢!

推荐答案

除非您想要构建一个定制主题(在这种情况下,您应该使用SCSS),否则使用一个CSS样式文件来定义四分块输出的CSS属性就足够了

因此,在一个styles.css文件中编写类 Select 器的css属性,并使用css YAML键从一个Quarto文档文件中引用这个styles.css.

style.css

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

quarto-doc.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
```

styled chunk output


现在,对于SCSS,要引用SCSS文件,您需要使用theme YAML键而不是css.

custom_style.scss


/*-- scss:rules --*/

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

quarto-doc.qmd个个

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

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

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

输出类似于上面的内容.

Css相关问答推荐

如何使搜索框扩展并溢出其他内容

使用间距时奇怪的MUI网格行为

如何在点击时停止动画并将其返回到第一帧?

如何使用CSS滚动驱动动画重复时间轴范围

如何减少弹性项目之间的差距

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

用于替代渲染的 CSS 嵌套

css - 悬停访问的链接没有背景 colored颜色

Blazor 组件未链接 css

带有图像的 CSS 网格在 Firefox 中表现不同

我怎样才能在某些区域制作一个单独的文本行,而在其他区域制作一个实心填充?

在响应式设计中指定 HTML 文本中的首选换行点

CSS:背景图像和填充

我应该使用 CSS :disabled 伪类还是 [disabled] 属性 Select 器,还是见仁见智?

CSS设置宽度以填充剩余区域的百分比

以原始大小的 50% 显示图像

在 CSS3 中重新启动动画:比删除元素更好的方法吗?

如何停止 setTimeout 循环?

height: 100% 或 min-height: 100% 用于 html 和 body 元素?

如何复制 iOS 上固定的后台附件