r - Xaringan 演示文稿中的子弹颜色

Question

是否可以更改 Xaringan 演示文稿中的项目符号颜色？文本应该有不同的颜色。

我在 xaringanthemer 包中没有找到任何选项，也没有通过 css 文件。我找不到任何信息 remark.js 文档。

Answer 1

您可以通过将自定义 CSS 添加到 Xaringan 演示文稿的 YAML 标头来更改项目符号点颜色。

以下是一个完全可重现的最小示例。

降价文件

title: "Example"
author: "Author"
date: "`r Sys.Date()`"
output:
  xaringan::moon_reader:
    css: 
        - default
        - default-fonts
        - custom.css
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

## Change bullet point colour

* An item
* Another item

风俗custom.css

我们已经使用了相关的 CSS 代码来对这里的要点进行主题化。

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

输出

Answer 2

xaringan输出为 html，因此您可以通过 css 更改任何部分（例如，使用本指南将项目符号颜色更改为红点。以此为模板，您可以在 Rmd 的 YAML 之后立即添加此块以将其更改为红色项目符号：

```{css, echo=F}
ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
```

将样式与内容分开

或者更优选（因为它从幻灯片内容中分离出样式组件），创建一个 css 文件，说它style.css包含：

ul {
  list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

然后添加 YAML，确保 style.css 与您的 Rmd 位于同一路径中，

css: [xaringan-themer.css, style.css]

调整子弹形状

您可以使用提供的不同 unicode 更改项目符号的形状content（例如\2023，用于三角形项目符号 - 请参阅此处的其他常见类型）。

更改项目符号颜色

您只需要替换red为您选择的颜色即可。您也可以用十六进制颜色代码替换它。