【问题标题】:Changing chunk background color in RMarkdown在 RMarkdown 中更改块背景颜色
【发布时间】:2017-04-23 03:57:21
【问题描述】:

我想用不同的颜色(例如红色)突出显示某个代码块,以表明这是不好的做法。如果我使用.Rnw,我可以添加块选项background = 'red' 并得到我想要的,但这似乎不适用于.Rmd。我的猜测是我需要制作一个自定义 css 样式表(尽管选择器是什么,我不知道),也许还需要创建一个自定义钩子。我希望它是基于每个块的,而不是整个文档的整体更改。

【问题讨论】:

  • 我最近几乎问过同样的问题,原因不同。我想根据它是“可选”(即仅打印和探索对象)还是“关键任务”(即分配给下游使用的对象)来不同地格式化块。我很高兴能对此做出判断并明确设置一个块选项。这对展示会很方便。

标签: css r knitr r-markdown


【解决方案1】:

您还可以使用以下示例:

```{css, echo = F}
h1 { color: rgb(255, 125, 0); }
h2 { color: brown; }
div.yellow pre { background-color: lightyellow; }
div.yellow pre.r { background-color: lightblue; }
.my_pink1 { background-color: pink; }
.my_pink2 { background-color: rgb(255, 113, 181); color: white; border: 3px solid blue; }
.my_span  { background-color: orange; font-family: courier}
```

# 标题 1
## 标题 2

```{r yellow_cars1}
summary(cars)
```

```{r yellow_cars2, class.source = "my_pink1", class.output = "my_pink2"}
summary(cars)
```

Test: <span class = "my_span">change properties</span> \
Roses are $\color{red}{\text{beautiful red}}$,
violets are $\color{blue}{\text{lovely blue}}$.

阅读更多,例如在
Changing chunk background color in RMarkdown
https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html
How to change the font color?

【讨论】:

    【解决方案2】:

    我找到了以下方法来对我编织成 PDF 的 Rmarkdown 文档中的块进行着色(编码):

    使用 pandoc 高亮方案作为基础

    pandoc --print-highlight-style pygments > my.theme
    

    然后编辑 my.theme 使用正则表达式设置所有

    "text-color": null
    

    然后,您可以将此属性更改为您喜欢的任何颜色(这里是浅灰色)

    "background-color": "#f8f8f8"
    

    在“pdf_document”下的 .Rmd 文档的 YAML 中,输入以下内容

    pandoc_args: --highlight-style=my.theme
    

    对于我的用例,这就是我所需要的。

    【讨论】:

    • 要运行第一个命令,您需要一个 unix 终端并且必须在您的机器上安装 pandoc。这对我来说很有帮助,我可以将 text-color 更改为我想要的任何内容 + PDF 文件的漂亮灰色背景。
    【解决方案3】:

    我们可以在代码块头中使用class.source 选项来为R Markdown 提供自定义CSS。这在以下帖子中进行了解释:

    Add a CSS class to single code chunks in RMarkdown

    举个例子,我可能会设置一个名为“badCode”的类,然后有一点 CSS 来改变你可能喜欢的背景。这是我的.Rmd

    ---
    output: html_document
    ---
    
    ```{css}
    .badCode {
    background-color: red;
    }
    ```
    
    ```{r mtcars}
    summary(mtcars)
    ```
    
    ```{r cars, class.source="badCode"}
    summary(cars)
    ```
    

    【讨论】:

    • 非常好。您能否解释第二次致电paste0() 的目的是什么?我不知道{.r ...}(带有周围的三个反引号)做了什么以及它是如何被处理的。
    • 你已经暴露了让一件事工作几次和真正理解发生了什么之间的区别:) 我会尽力处理后者。我认为 {.r ...} 符号是 pandoc 将这些作为 html 类处理的信号。对paste0() 的第二次调用只是将options$class 的内容作为... 插入{.r ...}。 FWIW,我的调试方法是查看 .md 文件(在 RStudio 中,使用“保留 md 文件”选项)。
    • 啊哈——这很有帮助。看起来它是 Pandoc 降价扩展 backtick_code_blocksfenced_code_attributes 的组合,可用于在包装 &lt;pre&gt;&lt;/pre&gt; 标记中插入各种属性。 See here 用于文档。也感谢调试提示。我曾尝试在我的 YAML 标头中设置 keep_md: true,但由于某种原因在这里不起作用。下次我遇到问题时,我会从 RStudio 尝试。感谢您的回复!
    • 不错,但它似乎弄乱了代码块的文本换行。
    • 我在别处发现了一个帖子,上面写着你的名字:github.com/yihui/knitr-examples/blob/master/116-html-class.Rmd。我考虑将其发布为新答案,但我更新了你的答案,因为感觉就像我在偷东西:)
    【解决方案4】:

    记住,markdown 支持代码块之外的 HTML。

    我会用一个带有自定义类的 div 包围代码块,该类可以按照我想要的方式设置它们的样式。此示例将代码样式设置为蓝色,输出样式为浅蓝色

    <style>
    div.blue pre { background-color:lightblue; }
    div.blue pre.r { background-color:blue; }
    </style>
    
    <div class = "blue">
    ```{r bluecars}
    summary(cars)
    ```
    </div>
    
    ```{r normal}
    summary(cars)
    ```
    

    【讨论】:

    • 这很聪明。出于某种原因,我记得在包裹代码块时遇到了问题。但现在我想起来了,那可能是我尝试使用 slidify 将
      //
      包裹在幻灯片周围的时候。
    • 这也适用于不同的语言代码块;我也可以将它用于 pre.js。
    【解决方案5】:

    这个解决方案有点老套,但它确实有效。它的要点是制作两个代码块,用唯一的类名交换 {r} 指示符。然后添加 css 代码来设置每个块的样式。

    ---
    output: html_document
    ---
    
    <style>
    pre.bluecars {
        background-color: #aabbff !important;
    }
    pre.redcars {
        background-color: #ffbbbb !important;
    }
    </style>
    
    ## chunk-specific bg colors
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = TRUE)
    ```
    
    - blue
    
    ```{bluecars}
    summary(cars)
    ```
    
    ```{r, echo=FALSE}
    summary(cars)
    ```
    
    - normal
    
    ```{r}
    summary(cars)
    ```
    
    - red
    
    ```{redcars}
    summary(cars)
    ```
    
    ```{r, echo=FALSE}
    summary(cars)
    ```
    

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签