带有突出显示的gitbook代码块中丑陋的深色条纹: espresso (R bookdown)
我使用R bookdown包创建一个gitbook。最近，我注意到呈现的gitbook中的代码块框下有一条难看的深色条纹(见下面的printscreen )。它出现时，highlight设置为espresso。像这样的条纹会分散注意力，当你试图读这本书时，看起来就没什么吸引力了。
我可以通过使用RStudio (很可能与最小订位示例相同的项目)创建一个新的预订项目来再现结果，并将文件_output.yml的内容替换为两行：
bookdown::gitbook:
highlight: espresso- 还有人能重现这个问题吗？
- 我怎样才能去掉条纹，但仍然使用
highlight: espresso
回答 1
Stack Overflow用户
发布于 2018-02-03 01:44:56
问题来自于pandoc 2.x的使用。
我复制了bug 这里，您可以在pandoc 1.19.x 这里中看到相同的gitbook。
我写了一个便条来解释我的https://gitlab.com/RLesur/debug-bookdown#a-workflow-for-debugging-side-effects-of-pandoc-v2-on-rmarkdown。
在这两个版本中，HTML源代码都非常接近(我自愿省略了div和@谢一辉不喜欢的行ids )。
<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>
您所遇到的问题是gitbook espresso highlighting.与主题之间的冲突的结果。
首先，暗条纹是espresso的“真实”背景色(参见这里)：pandoc将background-color of espresso高亮设置为#2a211c (它是硬编码的这里)。
内置的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">"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 元素设置background-color，而不是 div.sourceCode (这很重要)。
其次，gitbook主题仅适用于 elements espresso的暗背景颜色(Hex Gray97)，并定义了底部边缘(与pandoc CSS相反) 请参阅此文件，第9行，第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高亮显示没有它的“丑陋的”黑暗伙伴。换句话说，你想要一个“白咖啡”的突出显示。
因此，有两个选项：
- 去掉底部的边距。
- 取消
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规则，所以您可以以更优雅的方式获得相同的结果:使用important的可以定制突出显示主题**。
这个要旨定义了一个whitecoffee主题(它是具有Hex Gray97背景的espresso主题)。
将whitecoffee.theme文件保存在项目的根级，并修改_output.yml文件：
bookdown::gitbook:
highlight: whitecoffee.themehttps://stackoverflow.com/questions/48570690
复制相似问题
腾讯云开发者
