如何更改四开幻灯片中的文字颜色?

问题描述 投票:0回答:3

添加CSS样式颜色为绿色后

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

enter image description here

qmd 文件如下所示:

---
format: revealjs
---

我想更改标题文本的颜色,所以我在 CSS 样式下编写

color:green
但这会更改标题后面的文本,但不会更改标题文本本身。

如果我想更改任何一张特定幻灯片标题的颜色,我需要做什么更改?

quarto reveal.js
3个回答
6
投票

“如果用方括号括起来的内联序列(用于开始链接)如果后面紧跟属性,则将被视为带有属性的 Span”

例如

I am a [red]{style="color:green;"} word.

enter image description here


5
投票

如何设计四开展示演示文稿的样式

自定义四开显示演示文稿之一的最佳方法是使用

.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

revejs 格式也会发生这种情况。它在可视化编辑器中正确显示,因为我们模拟了结果。


3
投票

@cderv 已经通过使用自定义

style.scss
提供了最好的样式设置方式。

不幸的是,我有时很匆忙,出于懒惰,只是使用内联代码。使用 html

<p>
<span>
(跨度不会换行)仅设置您想要的段落或单词的样式。

例如:

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

渲染如下:

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.