Tips and Tricks for HTML and R

Over the past two months I have tried to convert completely to HTML5 slides, HTML reports and R + knitr. The switch from Sweave came with a few frustrations but I think overall it is way better - it is incredibly efficient and while some flexibility on report style is given up, a lot of speed is gained. To help make the change smoother, I have found that a a few pieces of non-R code have really helped me make HTML reports have parity with what I was doing before in R. An example is the CSS header below. 


<style type="text/css">
body, td {
   font-size: 16px;
   font-family: Times;
}
code.r{
  font-size: 10px;
}
pre {
  font-size: 10px;
  font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace;
}
pre code {
  font-size: 10px;
  font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace;
}
code {
  font-size: 16px;
  font-family: Times;
}

</style>

By inserting this at the head of our .Rmd file, we can modify a number of style elements in the resulting output. Most importantly, we can modify font sizes. 

We can modify the body of our HTML and the font using the first argument. We can modify the appearance of our R code by modifying the second code.r style. ​

​These modifications are really helpful for customizing the look and feel of an HTML file you might want to share for publication or align with your own internal style sheet at your organization. You also might want to increase font sizes if you are converting your .Rmd file to HTML5 slides as well. 

​