Display of a R chunk on a web page

[howardm19]

Hi,

Consider this code:

```r
# install.packages("usethis")
usethis::git_sitrep()
```

On this website (01: Set up | Hugo Apéro) it looks like this (a nice white box with content within):

---

---

On my current Distill web page, it looks like this (a Quote item) :

__

---

I really like the white box display. I would use it to highlight different kinds of content. What determines how this code is displayed ?

Thanks!

Howard

[cderv]

This is how distill will show code source chunk with the default template.
See in the doc: Distill for R Markdown

You can inspect the CSS use for pre and code element in a browser.

You would need to change the CSS and provide your own theme to use a different output

Distill for R Markdown

[howardm19]

@cderv

Thanks. I cannot figure out the pre and code elements from inspecting via a browser >> Developer Tools.

But, am I on the right track if I found this in a customized css file for another Distill web page ?:

/* Code chunks */

d-article pre { /* Chunk output */
  border-radius: 5px; /* Rounded edges */
  font-size: 12px;
  color: #fff;
  background-color: #696969;
  padding: 5px 5px 5px 18px;
}

d-article div.sourceCode pre { /* Chunk code */
  border-radius: 5px; /* Rounded edges */
  background-color: #fff;
  color: black;
  padding: 5px 5px 5px 18px;
}

d-article div.sourceCode {
  background-color: transparent;
}

Thanks.

[cderv]

Yes that would be by customizing CSS in distill that you would achieve that.

• About theme
• About CSS