4

有没有办法在呈现为ioslides_presentation的 R 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]
```
4

1 回答 1

6

如果您导航到您的 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

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未被子类覆盖,您可能会得到一些意想不到的结果。例如,如果我更改元素font-size的:pre

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

我的输出会很不稳定:

在此处输入图像描述

于 2018-05-09T18:42:05.097 回答