pkgdown小插图代码块间距 [英] pkgdown vignette code chunk spacing

问题描述

使用所有默认选项运行pkgdown::build_site()时，我在代码块输出方面遇到问题.块在 html内容中呈现，每行代码之间都有多余的空白.例如:

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()
```

结果为:

library(leaflet)


leaflet(toronto) %>% 


  addProviderTiles(providers$CartoDB.Positron) %>%


  addPolygons()

或者，以屏幕截图形式:

Or, in screenshot form:

尽管我知道这是一个独立的程序包，并且在README.md文件中也可以正常显示，但在blogdown生成的html内容中我没有遇到过这个问题.

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.

我在pkgdown代码块中找不到任何有关空格的提及，我想知道从哪里可以开始对此进行故障排除.

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.

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

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

设置块也是标准的.

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

推荐答案

问题是为html code元素指定的样式下的行高，该元素代表html页面上计算机代码的一部分.

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.

根据pkgdown::build_site的文档

如果要对pkgdown网站进行较小的自定义，最简单的方法是添加pkgdown/extra.css和pkgdown/extra.js.这些将自动复制到docs/中，并插入到默认的pkgdown CSS和JSS之后.

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"的文件即可达到目的:

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

下面的代码段说明了更改 line-height 的效果.

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>

这篇关于pkgdown小插图代码块间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！