Xaringan演示文稿中的项目符号颜色

Question

能否在Xaringan演示文稿中更改项目符号的颜色？文字应具有不同的颜色。

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

Answer 1

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

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

Markdown文件

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代码来对here中的要点进行主题化。

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更改任何部分（例如，使用this guide将项目符号颜色更改为红点。以此为模板，您可以在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]

调整子弹形状

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

更改项目符号的颜色

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