pkgdown vignette code chunk spacing

Question

I'm having issues with code chunk output when running pkgdown::build_site() with all default options. Chunks are rendered in html content with superfluous white space in between every line of code. For example:

```{r, message = FALSE}
library(leaflet)
leaflet(toronto) %>% 
  addProviderTiles(providers$CartoDB.Positron) %>%
  addPolygons()
```

Comes out as:

library(leaflet)


leaflet(toronto) %>% 


  addProviderTiles(providers$CartoDB.Positron) %>%


  addPolygons()

Or, in screenshot form:

I haven't faced this issue in html content generated by blogdown, although I understand that's an independent package, and the README.md file renders just fine as well.

I haven't been able to find any mention of spacing in pkgdown code chunks, and I'm wondering where I can start troubleshooting this.

The YAML section of the vignette uses default entries:

---
title: "Vignette Title"
author: "Autho"
date: "11/22/2017"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Vignette Title}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

And the setup chunk is standard as well.

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)
```

---

Session details:

R version 3.4.1 (2017-06-30)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: OS X El Capitan 10.11.6

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_CA.UTF-8/en_CA.UTF-8/en_CA.UTF-8/C/en_CA.UTF-8/en_CA.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] leaflet_1.1.0      ggplot2_2.2.1.9000 cancensus_0.1.5    bindrcpp_0.2      
[5] sf_0.5-5           dplyr_0.7.4        rgdal_1.2-15       sp_1.2-5          

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.13       lattice_0.20-35    class_7.3-14       assertthat_0.2.0  
 [5] rprojroot_1.2      digest_0.6.12      mime_0.5           R6_2.2.2          
 [9] plyr_1.8.4         backports_1.1.0    evaluate_0.10.1    e1071_1.6-8       
[13] httr_1.3.1         rlang_0.1.4        rematch_1.0.1      lazyeval_0.2.1    
[17] curl_2.8.1         rstudioapi_0.7     whisker_0.3-2      callr_1.0.0       
[21] rmarkdown_1.7      pkgdown_0.1.0.9000 desc_1.1.1         labeling_0.3      
[25] devtools_1.13.4    readr_1.1.1        udunits2_0.13      stringr_1.2.0     
[29] htmlwidgets_0.9    munsell_0.4.3      shiny_1.0.3        compiler_3.4.1    
[33] httpuv_1.3.5       pkgconfig_2.0.1    htmltools_0.3.6    highlight_0.4.7.2 
[37] tibble_1.3.4       roxygen2_6.0.1     viridisLite_0.2.0  crayon_1.3.4      
[41] withr_2.1.0.9000   MASS_7.3-47        commonmark_1.4     grid_3.4.1        
[45] jsonlite_1.5       xtable_1.8-2       gtable_0.2.0       DBI_0.7           
[49] magrittr_1.5       units_0.4-6        scales_0.5.0.9000  stringi_1.1.5     
[53] xml2_1.1.1         RColorBrewer_1.1-2 tools_3.4.1        glue_1.2.0        
[57] purrr_0.2.4        hms_0.3            crosstalk_1.0.0    pkgload_0.0.0.9000
[61] yaml_2.1.14        colorspace_1.3-2   classInt_0.1-24    memoise_1.1.0     
[65] knitr_1.17         bindr_0.1         

Answer 1

You must have upgraded to Pandoc 2.0, which is unnecessary at the moment. The easiest fix (also what I'd recommend) is to remove your own version of Pandoc. The slightly harder way is to report this issue to the author of pkgdown, and wait for a fix (for Pandoc 2.0), which would be similar to the fix here in rmarkdown. If pkgdown allows custom CSS, you can also fix it by yourself:

.sourceLine {
  display: inline-block;
}

Answer 2

The issue is the line-height under the style specified for the html code element, the element that represents a fragment of computer code on an html page.

According to the documentation for pkgdown::build_site,

If you want to do minor customisation of your pkgdown site, the easiest way is to add pkgdown/extra.css and pkgdown/extra.js. These will be automatically copied to docs/ and inserted into the after the default pkgdown CSS and JSS.

So, adding a file called 'extra.css' containing the code below should do the trick:

/*-- Extra CSS for code chunks --*/

pre, code {
  background-color: #f8f8f8;
  color: #333;
  line-height: 1.0; /*-- Change line-height as required --*/
}

The code snippet below illustrates the effects of changing line-height.

/*Using two class selectors to illustrate the example*/

pre,
code.wide {
  background-color: #f8f8f8;
  color: #333;
  line-height: 2.0;
}

pre,
code.narrow {
  background-color: #f8f8f8;
  color: #333;
  line-height: 1.0;
}

<pre>
  <code class="wide">
  1st line of code
  2nd line of code
  
  3rd line of code
  </code>
</pre>

<pre>
  <code class="narrow">
  1st line of code
  2nd line of code
  
  3rd line of code
  </code>
</pre>