在 R bookdown 中如何设置默认代码输出背景颜色

Question

我的 gitbook 风格的 R bookdown 书在灰色框中呈现代码输出。我想将其更改为带有黑色边框的白色框。我发现帖子显示如何为特定块设置颜色，但没有显示如何设置默认值。我想我需要像这样添加一个 css 文件：

--- 
title: x
author: clueless
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
documentclass: book
output:
  bookdown::gitbook: 
    css: "style.css"
---

但我不知道从这里到哪里去。我知道的很少css。因此，对于无知者的线索将不胜感激。

Answer 1

您的代码片段使用 <pre> 标记设置样式。如果您已经弄清楚如何 link 您的 CSS 文件，将以下内容添加到它应该会给您想要的结果：

例如：

pre {
    background: #fff;
    border: 1px solid #ddd;
    border-color: #000;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

<body>
<pre> 
Hello this is code 
This is more code. 
You could have this could be whatever you want.
Monty Python!
</pre>

</body>

请随意调整数字和值以满足您的需要。

Answer 2

仅使用 CSS

前面的答案对于 CSS 规则是正确的，但选择器必须更具体地用于 gitbook() 格式。这是CSS specificity.

的事情

使用浏览器检查器，您可以了解需要使用的选择器来覆盖由 gitbook 设置的默认 CSS 样式。

这个简单的css将替换背景并添加边框

.book .book-body .page-wrapper .page-inner section.normal pre {
    background: #fff;
    border: 1px solid #ddd;
    border-color: #000;
}

你像在 style.css 中一样输入，并在 index.Rmd 或 _output.yml 中使用 bookdown::gitbook 的 css 参数，具体取决于你是使用。

这将拾取 CSS。

我想你也可以使用 !important 来在 pre 和

上指定最多

pre {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-color: #000 !important;
}

(在上面评论后编辑)

使用 knitr 功能

另一种方法是使用 class.source 和 class.output https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html

这将允许您为输出设置特定的 class 并在 CSS.

中定位此 class

需要使用

将块选项应用于所有代码块

knitr::opts_chunk$set(class.output = "custom-output")

然后您可以使用 pre.custom-output 仅针对代码块输出部分，使用上述两种语法之一（完整选择器或 !important）

在 R bookdown 中如何设置默认代码输出背景颜色

In R bookdown how do I set the default code output background color

r

r-markdown

bookdown

仅使用 CSS

使用 knitr 功能