Ugly dark bar in a gitbook piece of code with backlight: espresso (R bookdown)

Question

I am using the R package bookdownto create a gitbook. I recently noticed an ugly dark bar under boxes of code snippets in a rendered gitbook (see below for a print screen). He appeared with highlight, mounted on espresso. Stripes like this are distracting when you try to read a book and look unattractive.

I can reproduce the result by creating a new bookdown project with RStudio (most likely the same project as the minimal bookdown example ), using the contents of the file _output.ymlreplaced by two lines:

bookdown::gitbook:
  highlight: espresso

• Can anyone else reproduce the problem?
• How can I get rid of the strip but still use it highlight: espresso?

Answer 1

- pandoc 2.x.
, gitbook pandoc 1.19.x .
, .

---

HTML ( div , @Yihui Xie ),

<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 (. ): background-color of espresso ​​ #2a211c 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) ( 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 bookdown _output.yml:

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

: espresso Hex Gray97
fix.css:

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

important , : pandoc 2.x, .
whitecoffee ( espresso Hex Gray97).
whitecoffee.theme _output.yml:

bookdown::gitbook:
  highlight: whitecoffee.theme