Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom CSS with knitr and markdown in R

Tags:

markdown

r

knitr

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.

like image 756
Btibert3 Avatar asked Oct 26 '12 23:10

Btibert3


People also ask

How do I add custom CSS to Rmarkdown?

Markdown does not support CSS styles. Since Markdown converts to HTML, Any valid HTML works. CSS styles are added with inline or style tags in HTML.

How do I write HTML in R markdown?

To transform your markdown file into an HTML, PDF, or Word document, click the “Knit” icon that appears above your file in the scripts editor. A drop down menu will let you select the type of output that you want. When you click the button, rmarkdown will duplicate your text in the new file format.

How do you apply inline style?

An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.


1 Answers

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")
like image 172
Brandon Bertelsen Avatar answered Sep 21 '22 02:09

Brandon Bertelsen