如何在r markdown ioslides演示文稿中的代码块中启用语法高亮？

Question

有没有一种方法可以在呈现为 ioslides_presentation 的 R markdown 文档的代码块中启用语法高亮？在 markdown 参考速查表 中写道，YAML 参数 highlight 不适用于 ioslides。因此，我想通过一个自定义的 css 文件来启用语法高亮，但由于我不熟悉 css，所以还没有找到任何解决方案。

如果有帮助就感激不尽。这里是一个简短的可重现示例：

---
title: "example"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

## Slide with R Output

```{r cars, echo = TRUE, eval = FALSE}
# cars' summary as an example for a comment
summary(cars)
# example for integers
cars[,1]
```

- frumentum

Answer 1

如果您导航到R安装库文件夹，您应该能够转到（请注意您的版本号可能会有所不同）：

rmarkdown > rmd > ioslides > ioslides-13.5.1 > theme > css

要查找“default.css”文件，您可以向下滚动到/*Pretty print */注释。在下面，您应该会看到一堆以.prettyprint开头的参数。最好的方法可能是将它们复制到一个新的自定义.css文件中，这样您就可以尝试一下，直到您得到所需的高亮效果。例如，我创建了一个名为slides.css的文件，并将其放在我的markdown文档相同的文件夹中。然后，我复制了这些css参数，只是修改了颜色：

/* Pretty print */

/* line 600, ../scss/default.scss */
.prettyprint .com {
  /* a comment */
  color: green;
  font-style: italic;
}

/* line 604, ../scss/default.scss */
.prettyprint .lit {
  /* a literal value */
  color: black;
}

/* line 609, ../scss/default.scss */
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo {
  color: red;
}

/* line 618, ../scss/default.scss */
.prettyprint .pln {
  color: blue;
}

然后，使用我的ioslides文件：

---
title: "Ioslides check"
output: 
  ioslides_presentation:
    css: slides.css
---

##

```{r}
# cars[,1]  as an example for a comment
head(cars)
cars[1:5, 1]
```

我的输出如下所示：

如果您想找出实际要修改的元素（例如，如果您希望改变代码的外观），您可以使用浏览器的检查功能（在chrome中按CTRL + SHIFT + I）来突出显示您的ioslides输出的元素，以查看它们属于哪个类。例如，当我突出显示结果输出时，它向我展示了可以通过调整“pre”（预格式化文本）标签来修改它。因此，如果我给“pre”添加一个color参数：

pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 20px;
  color: pink;
  line-height: 28px;
  padding: 10px 0 10px 60px;
  letter-spacing: -1px;
  margin-bottom: 20px;
  width: 106%;
  left: -60px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*overflow: hidden;*/
}

我可以更改结果的输出方式：

但请记住，上面许多类也包含在pre标签中，因此如果您对pre进行修改，而这些修改未被子类覆盖，可能会导致一些意外的结果。例如，如果我更改pre元素的font-size：

/* line 337, ../scss/default.scss */
pre {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 50px;
  line-height: 28px;
  padding: 10px 0 10px 60px;
  letter-spacing: -1px;
  margin-bottom: 20px;
  width: 106%;
  left: -60px;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*overflow: hidden;*/
}

但只更改某些子元素的字体大小

/* line 604, ../scss/default.scss */
.prettyprint .lit {
  /* a literal value */
  color: black;
  font-size: 20px;
}

我的输出将变得奇怪：

- Luke C

---

非常感谢您提供的详细答案。我正在寻找的关键词是“prettyprint”，它在default.css中。 - frumentum