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

Question

我使用R bookdown包来创建一个gitbook。最近我发现在渲染的gitbook中的代码块下面有一条丑陋的暗条纹（见下面的版画屏幕）。它出现时highlight设置为espresso。当人们试图阅读这本书并且看起来没有吸引力时，像这样的条纹会分散注意力。

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

bookdown::gitbook:
  highlight: espresso

1. 其他人可以重现这个问题吗？
2. 如何摆脱条纹，但仍然使用highlight: espresso？

Answer 1

问题来自pandoc 2.x的使用 我复制了错误here，您可以看到与gitbook here相同的pandoc 1.19.x。
我写了一封说明来解释我的debugging worflow。

在这两个版本中，HTML来源非常接近（我自愿省略div和行{} {{}}}。

<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>

您遇到的问题是gitbook主题与espresso突出显示之间的冲突造成的。

首先，暗条纹是espresso的“真实”背景颜色（请参阅@Yihui Xie dislikes）：background-color突出显示的espresso设置为{{1} } #2a211c（它是硬编码的here）。

内置pandoc突出显示为espresso（黑色，就像浓咖啡）：

pandoc v2.x

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">&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>与pandoc v1.19.x元素设置background-color而不是pre 略有不同（重要）。

其次，div.sourceCode主题仅针对gitbook元素取代 pre的深色背景颜色，并带有浅灰色背景（espresso）和定义底部边距（与Hex Gray97 CSS相反）here：

pandoc

此底部边距显示封闭的.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突出显示
的背景颜色

这是一个品味问题。

第一个解决方案：摆脱底部边缘
将这些行保存在扩展名为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 覆盖espresso背景颜色
在这种情况下，您可以在Hex Gray97中包含这些行：

fix.css

由于不建议使用div.sourceCode { background-color: #f7f7f7!important; } 规则，您可以更优雅的方式获得相同的结果： important，您可以自定义突出显示主题 。
see this file, line #9, column #31963定义了pandoc 2.x主题（whitecoffee主题，背景为espresso。） 将Hex Gray97文件保存在项目的根级别并修改whitecoffee.theme文件：

_output.yml