pkgdown 插图代码块间距

Question

当运行 pkgdown::build_site() 使用所有默认选项时，我遇到代码块输出问题。块在 html content 中呈现，每行代码之间有多余的白色 space。例如：

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

结果为：

library(leaflet)


leaflet(toronto) %>% 


  addProviderTiles(providers$CartoDB.Positron) %>%


  addPolygons()

或者，截图形式：

我在 blogdown 生成的 html 内容中没有遇到过这个问题，尽管我知道这是一个独立的包，并且 README.md 文件也呈现得很好。

我在 pkgdown 代码块中找不到任何关于间距的提及，我想知道从哪里开始解决这个问题。

小插图的 YAML 部分使用默认条目：

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

设置块也是标准的。

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

课程详情：

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

您必须升级到 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。如果pkgdown允许自定义CSS，你也可以自己修复：

.sourceLine {
  display: inline-block;
}

Answer 2

问题是为 html code 元素指定的样式下的行高，该元素表示 html 页面上的计算机代码片段。

根据 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.

因此，添加一个包含以下代码的名为 'extra.css' 的文件应该可以解决问题：

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

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

下面的代码片段说明了更改行高的效果。

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

pkgdown 插图代码块间距

pkgdown vignette code chunk spacing

r

knitr

r-markdown

pkgdown