Rmarkdown：如何在html_document中定位代码片段格式？

Question

我正在使用一些自定义CSS。主要是给我的文字一些左边距。但是，当我需要灰色背景时，它会影响代码片段的格式，为它们提供白色背景。

*此外，我已发布到r-help邮件列表中。但得到一个答案说这不是这个问题的正确位置。在电子邮件中发布代码很困难。

1）仅使用我的CSS：

更正左边距：标题和正文。
-Code片段：白色背景，带语法高亮显示。背景需要是灰色的。

我按照这个步骤（根据这个page）：

1) theme: null      
2) css: website2.css (my css document).   

2）使用我的CSS和主题：

然后我尝试使用主题：

---
output: 
    html_document:

      theme: cosmo
      css: website2.css

---

结果：

更正左边距：标题和正文。
-Code片段：正确的灰色背景 -font-family：改变了。我需要它继续作为＆＃34; Verdana＆＃34;。

它提供了我想要的代码snipet的格式，但更改了通用字体，来自＆＃34; Verdana＆＃34;到＆＃34;无法识别的字体＆＃34;。

我的Rmd文件：

---
output: 
    html_document:    
      theme: cosmo
      css: website2.css    
---

<!--html_preserve-->
<header id="cabecera">
            <div id="rectangle">  
            </div>
            <div id="titulo">
            <h1>omg.com</h1>
            <p>programmer</p>
            </div>
</header>
<!--/html_preserve-->


<main>

#Heatmap</br>

Hace ... 


En ...oportunidad ... [Tableau](http://www.tableau.com/)....


Por mi parte a inicios del 2015, me interesé por el tema de los heatmaps.

</br>


```{r heatmap, echo = FALSE}
library(d3heatmap)
library(reshape2)
library(ggplot2)


Sys.setenv(LANG = "es")


diasyhoras <- read.csv("diasyhoras.csv", encoding = "")

#Genera visitas random

visits <- runif(nrow(diasyhoras))
visits <- visits * 1000
visits <- round(visits, 0)

#Coloca la cantidad de visitas en la columna Visitas


diasyhoras$Visitas <- visits 


#Genera el heatmap dinámico


d3heatmap(diasyhoras2, scale = "row", colors = "Blues", dendrogram="none",  Rowv=FALSE, Colv=FALSE)



```



```{r ref.label='heatmap', eval = FALSE}
```


##Ggplot2 heatmap 

Esta es la versión con ggplot2...


```{r ,echo=FALSE, warning=FALSE, message=FALSE}
library(png)
library(grid)
img <- readPNG("HeatMap_Visitasporhora.png")
 grid.raster(img)

```

</main>

我的CSS（website2.css）：

body { 
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 100%;
    margin: 60px 0px 20px 70px;
}



/*header {
    margin: 0px 200px 20px 0px;
}*/

header h1 {
    font-size: 40px;
    margin: 0;
}



#rectangle {
    float: left;
    margin: 05px 10px 0px 0px;
    width:10px;
    height:90px;
    background:#37B7DE;
    /*position: relative; #No effect*/

}


/*Main part after header */

main {
    margin: 80px 60px 20px 60px;
}


/*Tamaño letra de los bloques*/

.bloque p,h3,lu,li {
    margin-left: 0px;
    font-size: 90%;
}


.bloque h2,a {
    margin-left: 0px;
    font-size: 100%;
}


/* Decorado de enlaces */
/*Tienen que estar en una section/div
con la clase "bloque"*/

.bloque a:link {
    color: #1271DE;
}

.bloque a:visited {
    color: #1378BC;
}

.bloque a:hover {
    color: #218CF7;
}

/* ==================== */


button {
    margin-left: 40px;
}

更新1：

我找到了this reference for Rmarkdown。

但是，是否有一些＆＃34; fonttheme＆＃34;对于HTML文档？参考文献pdf说它只适用于投影仪。

更新2 ：

为了使它更清晰，这里有一些图像：

我想要实现的目标：

- 看到代码在灰色的底座内。对于我使用的语法高亮：＆＃39; code-prettify＆＃39;。而对于后台CSS。所有这些都是在纯HTML和CSS中完成的，没有RMarkdown。

我拥有的：使用Rmarkdown和CSS

我得到左边距，但代码的背景设置为白色。

我希望现在一切都更清楚了。如果目前还不清楚，请告诉我。