change code block color in knitr/markdown

Question

I'm working on a markdown document in Rstudio that compares Perl and R. What I'd like to be able to do is have different code block background colors depending on the language used. For example

R code block

```{r}
dog <- 1
cat <- 2
dog + cat
```

Perl code block

```{r, engine='perl'}
$dog = 1;
$cat = 2;
print $dog + $cat;
```

If you generate an html file using knitr with the above code, the r code block has a solid grey background while the output from the code block has a white/transparent background.

However, the Perl code block and output has a white/transparent background which looks confusing. My hope is that there's an elegant way to do this in markdown/knitr.

Answer 1

I talked to Rstudio support as per Yihui's suggestion. They pointed out that I could essentially tell R to use my own style sheet with the following R code:

options(rstudio.markdownToHTML = 
function(inputFile, outputFile) {      
require(markdown)
markdownToHTML(inputFile, outputFile, stylesheet='custom.css')   
}
)

'custom.css' must be in your working directory. I downloaded R studio's CSS sheet (link) to look for a section to modify. Within the style sheet there's a block of code

code.r, code.cpp {   background-color: #F8F8F8;}

As Yihui pointed out this would only support color coded blocks for R and C++. A quick change to the following includes perl: code.r, code.cpp, code.perl { background-color: #F8F8F8;} Or make a different color by adding the following below the code.r background block.

code.perl {
background-color: #B53389;
}

Answer 2

I think that is a question for RStudio. At the moment, it seems to support two languages only (for syntax highlighting) -- R and C++; perhaps you can file a feature request to them, or you can render your markdown output with other tools like Pandoc, or just put the md files on Github which does syntax highlighting for Perl as well, e.g. example 028-engine-perl.md.

Answer 3

The reason this happens is because RStudio only bundles js and css required to highlight R code when you run knit2html. You can enable syntax highlighting for other languages by including the following css and javascript in your Rmd file.

<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script>
$(document).ready(function() {
  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>

This still does not solve the problem of different backgrounds, since both are controlled by the theme css. You can however include custom css to provide a different background for outputs.

Update:

Adding the following additional lines will help adjust output background color (i have chosen lightyellow, but you can customize it as desired)

<style>
pre code.bash {
  background: lightyellow;
}
</style>