Website Development - Highlighting Code Chunks

Date Posted:

June 20th Edit: R Code Chunks were updated throughout the website automatically, so the coloring is slightly different. This post is maintained to show another way of changing the chunk features.

Whenever we need to include functional R code, whether it’s to check the output or just see how it was written, we include code chunks. Yet, currently on this website, it is extremely difficult to differentiate from the normal text.

Prior to this post, code chunks would appear like the following:

Figure 1 - Code chunk that has no color differentiation

There are three primary issues here.

  1. The background color is the same as the normal posts.
  2. There is no syntax highlighting.
  3. The output also has the same formatting as everything else.

By improving on these three issues, we can drastically improve the readability of all our future posts that will include code.

Chunk Coloring

First, we test out the in-file css implementation referenced in section 6.4 of the (R Markdown Cookbook)[https://bookdown.org/yihui/rmarkdown-cookbook/].

.standard {
  background-color: lightgray;
  font-weight: bold;
  color:black
}
iris %>%
  group_by(Species) %>%
  summarize(n = n(), meanSepalW = mean(Sepal.Width))
## # A tibble: 3 x 3
##   Species        n meanSepalW
##   <fct>      <int>      <dbl>
## 1 setosa        50       3.43
## 2 versicolor    50       2.77
## 3 virginica     50       2.97

Overall, not too bad! The code chunk is now a different color, and the text is fairly legible. However, this coloring is less effective for light mode users compared to dark mode, and so we’d rather use a different scheme. Instead, how about we try to replicate the standard formatting seen after knitting an rmd file? Additionally, let’s implement it into the stylesheet so we don’t have to rewrite the css every time.

This post will be updated as we learn more about CSS and how we can optimize the color.