带有突出显示的 gitbook 代码块中的丑陋深色条纹：浓缩咖啡（R bookdown）

Question

我使用 R bookdown 包来创建一个 gitbook。最近我注意到渲染的 gitbook 中代码块框下有一条难看的深色条纹（请参见下面的打印屏幕）。它出现时 highlight 设置为 espresso。像这样的条纹，看书的时候会分散注意力，看起来不好看。

我可以通过使用 RStudio 创建一个新的 bookdown 项目（很可能是与 minimal bookdown example 相同的项目）来重现结果，并将文件 _output.yml 的内容替换为两行：

bookdown::gitbook:
  highlight: espresso

其他人能否重现该问题？
如何去除条纹，但仍然使用 highlight: espresso？

Answer 1

问题出在pandoc 2.x的使用上。
我重现了错误 here and you can see the same gitbook with pandoc 1.19.x here.
我写了一个注释来解释我的 debugging worflow。

在两个版本中，HTML 来源非常接近（我自愿省略 div 和 @Yihui Xie dislikes 的行 ID）。

<div class="sourceCode">
  <pre class="sourceCode r">
    <code class="sourceCode r">
     <span class="kw">install.packages</span>(<span class="st">&quot;bookdown&quot;</span>)
     <span class="co"># or the development version</span>
     <span class="co"># devtools::install_github(&quot;rstudio/bookdown&quot;)</span>
    </code>
  </pre>
</div>

您遇到的问题是主题与espresso突出显示之间冲突的结果。

首先，深色条纹是 espresso 的 "real" 背景颜色（参见 here): the background-color of espresso highlighting is set to #2a211c by pandoc (it is hard-coded here）。

pandoc v2.x 的内置 espresso 突出显示看起来像这样（它是黑色的，像浓缩咖啡）：

code span.kw { color: #43a8ed; font-weight: bold; } code span.st { color: #049b0a; } code span.co { color: #0066ff; font-weight: bold; font-style: italic; } div.sourceCode { color: #bdae9d; background-color: #2a211c; } div.sourceCode { overflow: auto; } div.sourceCode { margin: 1em 0; } pre.sourceCode { margin: 0; }

<div class="sourceCode"> <pre class="sourceCode r"> <code class="sourceCode r"> <span class="kw">install.packages</span>(<span class="st">"bookdown"</span>) <span class="co"># or the development version</span> <span class="co"># devtools::install_github("rstudio/bookdown")</span> </code> </pre> </div>

它与 pandoc v1.19.x 略有不同，其中 background-color 是为 pre 元素设置的，而不是 div.sourceCode（它是重要）。

其次，gitbook 主题否决 仅适用于 pre 元素 espresso 的深色背景颜色带有浅灰色背景（Hex Gray97) 并定义底部边距（与 pandoc 相反 CSS） see this file, line #9, column #31963:

.book .book-body .page-wrapper .page-inner section.normal pre { overflow: auto; word-wrap: normal; margin: 0 0 1.275em; padding: .85em 1em; background: #f7f7f7; }

此底部边距显示封闭 div 元素的背景颜色：

在 pandoc 1.19.x 中，封闭的 div 没有 background-color 规则（背景颜色应用于 pre 元素）。所以，没有黑色条纹。

在pandoc 2.x中，背景颜色设置在div级别。有一条黑色条纹。

根据你的问题，我了解到你想要 espresso 高亮而不是 "ugly" 深色伴侣。换句话说，您需要 "white coffee" 突出显示。

所以，有两个选择：

去掉底部边距

否决 espresso 突出显示的背景颜色

这是一个品味问题。

第一个方案：去掉底部边距
将这些行保存在扩展名为 .css 的文件中（例如 fix.css）：

.book .book-body .page-wrapper .page-inner section.normal pre { margin-bottom: 0!important; }

将此 CSS 文件包含在您的簿记修改中 _output.yml:

bookdown::gitbook: highlight: espresso css: fix.css

第二种解决方案：用Hex Gray97
否决espresso背景颜色在这种情况下，您可以在 fix.css 中包含这些行：

div.sourceCode { background-color: #f7f7f7!important; }

由于不推荐使用important规则，可以用更优雅的方式获得相同的结果：和pandoc 2.x，可以自定义高亮主题.
This gist 定义了一个 whitecoffee 主题（它是带有 Hex Gray97 背景的 espresso 主题）。
将 whitecoffee.theme 文件保存在项目的根级别并修改 _output.yml 文件：

bookdown::gitbook: highlight: whitecoffee.theme

带有突出显示的 gitbook 代码块中的丑陋深色条纹：浓缩咖啡（R bookdown）

Ugly dark stripe in code chunk of gitbook with highlight: espresso (R bookdown)

r

highlight.js

bookdown