Custom CSS with knitr and markdown in R - r

Question

I found this great tutorial on how to modify the css formatting of a HTML report created with markdown and knitr in Rstudio. The post can be found here.
I was hoping to build on this concept and mimic the layout of the page here by using the same css. I tried to simply copy/paste/combine the two css files I found when I viewed the page's source.
Any help you can lend would be greatly appreciated! This is my first attempt and doing anything CSS.

Answer 1

This is the method provided by RStudio: http://www.rstudio.com/ide/docs/authoring/markdown_custom_rendering
options(rstudio.markdownToHTML =
function(inputFile, outputFile) {
require(markdown)
markdownToHTML(inputFile, outputFile, stylesheet='custom.css')
}
)
I've never been able to get that working properly so I do it a little differently:
I do this by creating the standard output file, then dropping the header and css code at the top in R:
tmp <- readLines("your.html")
tmp <- tmp[-c(1:50)] # or however many lines it is before the css ends
write(tmp,"your.html")
Then I use pandoc to add my own css in a standalone file
system("pandoc -s -S your.html -c your.css -o output.html")

Answer 2

Outside of RStudio (may work in it too - I'm not sure as I don't use it much), you can use option 'markdown.HTML.stylesheet' to set a custom style sheet. It will then import everything from your .css file into the newly created html file.
Here is an example:
## Set file names
htmlName <- "test.html"
rmdName <- gsub("html","Rmd", htmlName)
stylesheetName <- 'style.css'
## Generate rmd file from R
sink(file = rmdName, type='output')
cat('\n<textarea maxlength="3000" cols="70">')
cat("Hello World!")
cat('</textarea>\n')
sink()
## Generate style sheet from R
sink(file = stylesheetName, type='output')
cat("textarea {color: #a10000; }\n")
sink()
## Set knitr options and knit html
require(knitr)
options(markdown.HTML.stylesheet = stylesheetName)
knit2html(rmdName, output = htmlName)