Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

R markdown: how to change style with internal css?

I know how to change R markdown style with a custom css file. However, when the changes are minor, I prefer internal or even inline css, to save trouble from managing two files. I googled and haven't find a solution for this. Below is a simple example of changing style with an external css file. Is there a way to do it with internal or inline css?

The R markdown file:

---
title: "test"
output: 
    html_document:
        css: test.css
---

## Header 1 {#header1}
But how to change style with internal css?

The test.css file:

#header1 {
color: red;
}
like image 682
GL_Li Avatar asked Dec 01 '15 14:12

GL_Li


3 Answers

Markdown accepts raw HTML and passes it through unaltered, so define your "styled" elements as HTML:

<h2 style="color: red;">Header 1</h2>

Of course, some tools don't actually allow the raw HTML to be passed through (for security reasons or because the final output is not HTML), so your mileage may vary.

Depending on the Markdown implementation you are using, you may be able to define styles in the attribute list (if it supports arbitrary keys):

## Header 1 {style="color: red;"}

However, that is the least likely to work.

And remember, HTML <style> tags do not need to be in the document <head> to work. If you can use raw HTML, you can include a <style> element in the body of your document (as pointed out by @user5219763 in a comment):

---
title: "test"
output: 
    html_document
---

<style>
    #header1 {
        color: red;
    }
</style>

## Header 1 {#header1}
But how to change style with internal css?
like image 74
Waylan Avatar answered Nov 09 '22 14:11

Waylan


If you don't want to create an external .css file, but would like to define several styles and would rather keep your code less crowded, another possibility is to use a css chunk at the beginning of your R markdown:

  ---
  title: "test"
  output: html_document
  ---

  ```{css, echo = FALSE}

  #header1 {
  color: red;
  }

  ```

  ## Header 1 {#header1}

In the css chunk, you can control multiple styles, as you would do in an external .css file.

like image 24
rosie-betzler Avatar answered Nov 09 '22 16:11

rosie-betzler


Another, sort of hacky option is to specify a css file in the script, then create it in the first chunk.

e.g. the first 18 lines of your .Rmd file:

  ---
  title: "Something Important"
  output: 
    html_document:
      css: mystyle.css
  ---


  ```{r b, echo=F}
  writeLines("td, th { padding : 6px } 
             th { background-color : coral ; 
                  color : white; 
                  border : 1px solid white; } 
             td { color : black ; 
                  border : 1px solid skyblue }
             h1, h2, h3, h4, h5, p { font-family: consolas; ",
             con = "mystyle.css")
  ```

In the above, I first reference the file mystyle.css in the header block of markdown. Then, I create the file using writeLines(), and save it to the file specified with con = ....

Personally, I think the best option is to just throw your code in between some <script></script> tags if it's a one-off R script.

However, if you do want to create an external file, but don't want to edit a separate file, the above method provides a workaround. It just feels odd.

like image 37
Jared Wilber Avatar answered Nov 09 '22 14:11

Jared Wilber