Add a CSS Class to Single Code Chunks in Rmarkdown

Add a CSS class to single code chunks in RMarkdown

Edit: this feature was introduced in knitr v.1.16 (05/18/17)

class.source and class.output options apply additional HTML classes to source and output chunks (see knitr documentation).

To add myClass to source chunk:

```{r cars, class.source='myClass'}
summary(cars)
```  

---

Previous answer that inspired the class.source options (see here)

You can add a class using the fenced_code_attributes pandoc's extension (which is intended to add attributes to the <pre> tag, see here) and a knitr output hook.

The following example works fine:

---
title: "Untitled"
  output: 
    html_document:
      md_extensions: +fenced_code_attributes
---

```{r, include=FALSE}
knitr::knit_hooks$set(source = function(x, options) {
  return(paste0(
    "```{.r",
    ifelse(is.null(options$class),
      "", 
      paste0(" .", gsub(" ", " .", options$class))
    ),
    "}\n",
    x,
    "\n```"
  ))
})
```

```{r cars, class="myClass1 myClass2"}
summary(cars)
```

After knitting this .Rmd file, the HTML document looks like this:

<pre class="r myClass1 myClass2">
    <code>
        summary(cars)
    </code>
</pre>

The fenced_code_attributes extension is enabled by default: in standard cases, you don't need to include the line md_extensions: +fenced_code_attributes in your YAML header.

I don't know if there's more straightforward solution using knitr.

Customize css for input/output chunks in xaringan

These chunk options won't work for xaringan because xaringan doesn't use Pandoc's Markdown syntax but remark.js's. That is, they generate ```{.r .class}, which only works for Pandoc's Markdown. I don't have time to support them in xaringan, but if you want to contribute a pull request on Github, here is the place to start: https://github.com/yihui/xaringan/blob/2ad2a6d/R/render.R#L195-L204 Basiscally, you wrap the source/output character strings inside .class[], which is remark.js's syntax for adding classes to elements.

Without a patch, you can only apply a class name to the whole output, and style the code blocks inside the class, e.g.,

---
title: Change the chunk style
output:
  xaringan::moon_reader
---

```{css, echo=FALSE}
/* R code */
.foobar code.r {
  font-weight: bold;
}
/* code without language names */
.foobar code[class="remark-code"] {
  display: block;
  border: 1px solid red;
}
```

.foobar[
```{r}
mtcars[1:5, "mpg"]
```
]

How to change style of R-output-box in RMarkdown

Found the answer here https://bookdown.org/yihui/rmarkdown-cookbook/chunk-styling.html

You can refer to code- and output-box via class.source and class.output

In the css-file, create a new class foobar containing your desired styling, e.g.

.foobar {
background-color: rgb(100, 0, 0);
}

Refer to foobar within an r-chunk with

```{r class.output="foobar"}
# some r code
```

If you want to set class.output="foobar" as default, add to the YAML header

knitr::opts_chunk$set(echo = TRUE, class.output="foobar")

Keep in mind, that there are some pre-defined classes ready for use, try out "bg-primary", "bg-success", "bg-info", "bg-warning", and "bg-danger"

Is there a way to use knitr's css class options when using kable tables?

Add the class bg-success to the table thru the table.attr argument:

knitr::kable(head(iris), table.attr = "class=\'bg-success\'") %>% 
  kableExtra::kable_styling()

I realized that you need to modify the style of HTML table, passing class/argument to kable_styling function.

Apparently, there is no need to specify format argument:

knitr::kable(head(iris), table.attr = "class=\'bg-success\'", format = "html") %>% 
  kableExtra::kable_styling()

Also, you need to include library(kableExtra) to {r setup}.

You may find more info about table.attr argument at section 13.1.11 Customize HTML tables

---

Related Topics