Xaringan 演示文稿中的子弹颜色答案

【问题标题】：Bullet color in Xaringan presentationXaringan 演示文稿中的子弹颜色
【发布时间】：2019-10-13 18:57:23
【问题描述】：

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

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

【问题讨论】：

标签： r r-markdown xaringan remarkjs

【解决方案1】：

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

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

降价文件

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) */
}

输出

【讨论】：

【解决方案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 替换为您选择的颜色即可。您也可以用十六进制颜色代码替换它。