1

I am trying to have code chunks displayed with a dark background in my website generated by pkgdown.

I've been looking for a way to change syntax highlighting in code chunks, but found only little information so far, and nothing that allowed me to tweak or simply change the highlighting theme.

I've tried adding highlight: zenburn either in the vignette's YAML or in the _pkgdown.yml but it didn't change anything.

However, I found this code to be put into an extra.css file in the pkgdown folder to modify certain aspects:

.fl      {color: #1514b5;}
.fu      {color: #FF9800;}  /* function */
.ch,.st  {color: #CDDC39;}  /* string */
.kw      {color: #FFC107;}  /* keyword */
.co      {color: #9E9E9E;}  /* comment */

.message { color: #EEEEEE;   font-weight: bolder;}
.error   { color: #f44336;  font-weight: bolder;}
.warning { color: #9C27B0; font-weight: bolder;}

This works (i.e., it does have an effect on the syntax highlighting), but I cannot find the command to modify the background colour (and switch to a dark background). Is there a way of simply changing the theme (for instance, to zenburn, which has a dark background)? If not, what would be the right CSS to do so?

This is the pkgdown website I am trying to modify, and this is my goal:

enter image description here

TylerH
  • 20,799
  • 66
  • 75
  • 101
Dominique Makowski
  • 1,511
  • 1
  • 13
  • 30
  • I ran into the same problem, and ended up making a custom template to handle it nicely, so, if you are still looking. It's called [preferably](http://amirmasoudabdol.github.io/preferably)! – Amir Jan 08 '21 at 12:45

1 Answers1

3

I'm not familiar with the package that you're using, but you should be able to do something like body { background-color: white; } to change the background color of the entire page.

To change the background color specifically for the code sections, you simply need to change body above to the relevant selector, so pre, code { background-color: white; }.

Avery Saucier
  • 136
  • 7
  • Thanks a lot for your answer! What does `.fl` stands for? Also, would you know the "selector" (the name) of "code chunks"? – Dominique Makowski Apr 22 '19 at 01:49
  • Is there a live webpage available where I can see the code chunk myself? – Avery Saucier Apr 22 '19 at 02:08
  • Yes, the website is [here](https://easystats.github.io/bayestestR/) and the underlying html code is, I believe, [here](https://github.com/easystats/bayestestR/tree/master/docs/articles). Thanks!! – Dominique Makowski Apr 22 '19 at 02:18
  • I updated my answer. See if that answers your question. – Avery Saucier Apr 22 '19 at 02:26
  • thanks a lot, unfortunately, your code also color the inline code (and not just the chuncks, see the image in my edited answer). Is there a way to speficy only the "chunks" per se? Thanks again :) – Dominique Makowski Apr 22 '19 at 02:50
  • @DominiqueMakowski I think you should be able to remove the `, code` part from the snippet Avery included above and have it work the way you want it to. You can play with it yourself using your browser's developer tools (Right click -> Inspect element in Chrome). – Zach Saucier Apr 22 '19 at 12:36
  • Yes I managed to understand and fix it to my desires. Thanks a lot :) – Dominique Makowski Apr 22 '19 at 16:11