Display of a R chunk on a web page


Consider this code:

# install.packages("usethis")

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 ?



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


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;


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

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.