Syntax highlighting choices (#1841)

Generate SCSS stylesheets from quarto's pandoc themes and then allow the user to choose with a new `template.theme` parameter.

Fixes #1823

NEWS.md

@@ -63,6 +63,9 @@
   for its internal css tweaks. This means that you can now customise more parts 
   of the site using only `_pkgdown.yml`, without having to supply custom css.
 
+* You can pick from a variety of built-in syntax highlighting themes (#1823).
+  These control the colours (and background) of code in `<pre>` tags.
+
 * Template packages can now provide a default configuration `_pkgdown.yml`, 
   stored in `inst/pkgdown/_pkgdown.yml`. This can be used to set (e.g.) author 
   definitions, Bootstrap version and variables, the sidebar, footer, navbar, 

R/theme.R

@@ -44,20 +44,26 @@ bs_theme <- function(pkg = ".") {
 
   # Add additional pkgdown rules
   rules <- bs_theme_rules(pkg)
-  for (rule in rules) {
-    bs_theme <- bslib::bs_add_rules(bs_theme, sass::sass_file(rule))
-  }
+  files <- lapply(rules, sass::sass_file)
+  bs_theme <- bslib::bs_add_rules(bs_theme, files)
 
   bs_theme
 }
 
 bs_theme_rules <- function(pkg) {
-  paths <- c(
-    path_pkgdown("BS5", "assets", "pkgdown.scss"),
-    path_pkgdown("BS5", "assets", "syntax-highlighting.scss")
-  )
+  paths <- path_pkgdown("BS5", "assets", "pkgdown.scss")
+
+  theme <- purrr::pluck(pkg, "meta", "template", "theme", .default = "arrow-light")
+  theme_path <- path_pkgdown("highlight-styles", paste0(theme, ".scss"))
+  if (!file_exists(theme_path)) {
+    abort(c(
+      paste0("Unknown theme '", theme, "'"),
+      i = paste0("Valid themes are: ", paste0(highlight_styles(), collapse = ", "))
+    ))
+  }
+  paths <- c(paths, theme_path)
 
-  package <- pkg$meta$template$package
+  package <- purrr::pluck(pkg, "meta", "template", "package")
   if (!is.null(package)) {
     package_extra <- path_package_pkgdown(
       "extra.scss",
@@ -78,6 +84,11 @@ bs_theme_rules <- function(pkg) {
   paths
 }
 
+highlight_styles <- function() {
+  paths <- dir_ls(path_pkgdown("highlight-styles"), glob = "*.scss")
+  path_ext_remove(path_file(paths))
+}
+
 get_bootswatch_theme <- function(pkg) {
   pkg$meta[["template"]]$bootswatch %||%
     pkg$meta[["template"]]$params$bootswatch %||%

inst/BS5/assets/pkgdown.scss

@@ -337,6 +337,49 @@ div.csl-indent {
   margin-left: 2em;
 }
 
+/* code ===================================================================== */
+
+pre, pre code {
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+pre code {
+  padding: 0;
+}
+pre code a:any-link {
+  color: inherit;
+}
+
+pre .img, pre .r-plt {
+  margin: 5px 0;
+}
+pre .img img, pre .r-plt img {
+  background-color: #fff;
+}
+
+code a:any-link {
+  text-decoration: underline;
+  text-decoration-color: $gray-400;
+}
+
+/* don't display links in code chunks when printing */
+/* source: https://stackoverflow.com/a/10781533 */
+@media print {
+  code a:link:after, code a:visited:after {
+    content: "";
+  }
+}
+
+a.sourceLine:hover {
+  text-decoration: none;
+}
+
+pre code span.error   {font-weight: bolder;}
+pre code span.warning {font-weight: bolder;}
+
+
 /* search =================================================================== */
 
 mark {

inst/highlight-styles/arrow-dark.scss

@@ -0,0 +1,31 @@
+pre code         /* Normal         */ {color:#f8f8f2}
+pre code span.al /* Alert          */ {color:#f07178; background-color:#2a0f15; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#d4d0ab}
+pre code span.at /* Attribute      */ {color:#00e0e0}
+pre code span.bn /* BaseN          */ {color:#d4d0ab}
+pre code span.bu /* BuiltIn        */ {color:#abe338}
+pre code span.cf /* ControlFlow    */ {color:#ffa07a; font-weight: bold}
+pre code span.ch /* Char           */ {color:#abe338}
+pre code span.cn /* Constant       */ {color:#ffd700}
+pre code span.co /* Comment        */ {color:#f8f8f2; font-style: italic}
+pre code span.cv /* CommentVar     */ {color:#ffd700}
+pre code span.do /* Documentation  */ {color:#f8f8f2}
+pre code span.dt /* DataType       */ {color:#ffa07a}
+pre code span.dv /* DecVal         */ {color:#d4d0ab}
+pre code span.er /* Error          */ {color:#f07178; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#00e0e0; font-weight: bold}
+pre code span.fl /* Float          */ {color:#d4d0ab}
+pre code span.fu /* Function       */ {color:#ffa07a}
+pre code span.im /* Import         */ {color:#abe338}
+pre code span.in /* Information    */ {color:#d4d0ab}
+pre code span.kw /* Keyword        */ {color:#ffa07a; font-weight: bold}
+pre code span.op /* Operator       */ {color:#ffa07a}
+pre code span.ot /* Others         */ {color:#00e0e0}
+pre code span.pp /* Preprocessor   */ {color:#dcc6e0}
+pre code span.re /* RegionMarker   */ {color:#00e0e0; background-color:#f8f8f2}
+pre code span.sc /* SpecialChar    */ {color:#abe338}
+pre code span.ss /* SpecialString  */ {color:#abe338}
+pre code span.st /* String         */ {color:#abe338}
+pre code span.va /* Variable       */ {color:#00e0e0}
+pre code span.vs /* VerbatimString */ {color:#abe338}
+pre code span.wa /* Warning        */ {color:#dcc6e0}

inst/highlight-styles/arrow-light.scss

@@ -0,0 +1,31 @@
+pre {background-color: #f1f3f5;}
+pre code         /* Normal         */ {color:#007BA5}
+pre code span.al /* Alert          */ {color:#AD0000}
+pre code span.an /* Annotation     */ {color:#5E5E5E}
+pre code span.at /* Attribute      */ {}
+pre code span.bn /* BaseN          */ {color:#AD0000}
+pre code span.bu /* BuiltIn        */ {}
+pre code span.cf /* ControlFlow    */ {color:#007BA5}
+pre code span.ch /* Char           */ {color:#20794D}
+pre code span.cn /* Constant       */ {color:#8f5902}
+pre code span.co /* Comment        */ {color:#5E5E5E}
+pre code span.cv /* CommentVar     */ {color:#5E5E5E; font-style: italic}
+pre code span.do /* Documentation  */ {color:#5E5E5E; font-style: italic}
+pre code span.dt /* DataType       */ {color:#AD0000}
+pre code span.dv /* DecVal         */ {color:#AD0000}
+pre code span.er /* Error          */ {color:#AD0000}
+pre code span.ex /* Extension      */ {}
+pre code span.fl /* Float          */ {color:#AD0000}
+pre code span.fu /* Function       */ {color:#4758AB}
+pre code span.im /* Import         */ {}
+pre code span.in /* Information    */ {color:#5E5E5E}
+pre code span.kw /* Keyword        */ {color:#007BA5}
+pre code span.op /* Operator       */ {color:#5E5E5E}
+pre code span.ot /* Other          */ {color:#007BA5}
+pre code span.pp /* Preprocessor   */ {color:#AD0000}
+pre code span.sc /* SpecialChar    */ {color:#5E5E5E}
+pre code span.ss /* SpecialString  */ {color:#20794D}
+pre code span.st /* String         */ {color:#20794D}
+pre code span.va /* Variable       */ {color:#111111}
+pre code span.vs /* VerbatimString */ {color:#20794D}
+pre code span.wa /* Warning        */ {color:#5E5E5E; font-style: italic}

inst/highlight-styles/atom-one-dark.scss

@@ -0,0 +1,31 @@
+pre code         /* Normal         */ {color:#abb2bf}
+pre code span.al /* Alert          */ {color:#95da4c; background-color:#4d1f24; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#98c379}
+pre code span.at /* Attribute      */ {color:#c678dd}
+pre code span.bn /* BaseN          */ {color:#d19a66}
+pre code span.bu /* BuiltIn        */ {color:#c678dd}
+pre code span.cf /* ControlFlow    */ {color:#c678dd}
+pre code span.ch /* Char           */ {color:#98c379}
+pre code span.cn /* Constant       */ {color:#d19a66}
+pre code span.co /* Comment        */ {color:#5c6370; font-style: italic}
+pre code span.cv /* CommentVar     */ {color:#e06c75; font-style: italic}
+pre code span.do /* Documentation  */ {color:#a43340}
+pre code span.dt /* DataType       */ {color:#c678dd}
+pre code span.dv /* DecVal         */ {color:#d19a66}
+pre code span.er /* Error          */ {color:#f44747; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#61afef; font-weight: bold}
+pre code span.fl /* Float          */ {color:#d19a66}
+pre code span.fu /* Function       */ {color:#61afef}
+pre code span.im /* Import         */ {color:#98c379}
+pre code span.in /* Information    */ {color:#c45b00}
+pre code span.kw /* Keyword        */ {color:#c678dd}
+pre code span.op /* Operator       */ {color:#c678dd}
+pre code span.ot /* Others         */ {color:#27ae60}
+pre code span.pp /* Preprocessor   */ {color:#c678dd}
+pre code span.re /* RegionMarker   */ {color:#2980b9; background-color:#153042}
+pre code span.sc /* SpecialChar    */ {color:#56b6c2}
+pre code span.ss /* SpecialString  */ {color:#da4453}
+pre code span.st /* String         */ {color:#98c379}
+pre code span.va /* Variable       */ {color:#e06c75}
+pre code span.vs /* VerbatimString */ {color:#da4453}
+pre code span.wa /* Warning        */ {color:#da4453}

inst/highlight-styles/atom-one-light.scss

@@ -0,0 +1,31 @@
+pre code         /* Normal         */ {color:#383a42}
+pre code span.al /* Alert          */ {color:#95da4c; background-color:#4d1f24; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#50a14f}
+pre code span.at /* Attribute      */ {color:#a626a4}
+pre code span.bn /* BaseN          */ {color:#986801}
+pre code span.bu /* BuiltIn        */ {color:#a626a4}
+pre code span.cf /* ControlFlow    */ {color:#a626a4}
+pre code span.ch /* Char           */ {color:#50a14f}
+pre code span.cn /* Constant       */ {color:#986801}
+pre code span.co /* Comment        */ {color:#a0a1a7; font-style: italic}
+pre code span.cv /* CommentVar     */ {color:#e45649; font-style: italic}
+pre code span.do /* Documentation  */ {color:#e45649}
+pre code span.dt /* DataType       */ {color:#a626a4}
+pre code span.dv /* DecVal         */ {color:#986801}
+pre code span.er /* Error          */ {color:#f44747; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#4078f2; font-weight: bold}
+pre code span.fl /* Float          */ {color:#986801}
+pre code span.fu /* Function       */ {color:#4078f2}
+pre code span.im /* Import         */ {color:#50a14f}
+pre code span.in /* Information    */ {color:#c45b00}
+pre code span.kw /* Keyword        */ {color:#a626a4}
+pre code span.op /* Operator       */ {color:#a626a4}
+pre code span.ot /* Others         */ {color:#27ae60}
+pre code span.pp /* Preprocessor   */ {color:#a626a4}
+pre code span.re /* RegionMarker   */ {color:#2980b9; background-color:#153042}
+pre code span.sc /* SpecialChar    */ {color:#0184bc}
+pre code span.ss /* SpecialString  */ {color:#da4453}
+pre code span.st /* String         */ {color:#50a14f}
+pre code span.va /* Variable       */ {color:#e45649}
+pre code span.vs /* VerbatimString */ {color:#da4453}
+pre code span.wa /* Warning        */ {color:#da4453}

inst/highlight-styles/ayu-dark.scss

@@ -0,0 +1,32 @@
+pre {background-color: #0a0e14;}
+pre code         /* Normal         */ {color:#b3b1ad}
+pre code span.al /* Alert          */ {color:#ff3333; background-color:#2a0f15; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#e6b673}
+pre code span.at /* Attribute      */ {color:#59c2ff}
+pre code span.bn /* BaseN          */ {color:#e6b450}
+pre code span.bu /* BuiltIn        */ {color:#95e6cb}
+pre code span.cf /* ControlFlow    */ {color:#ff8f40; font-weight: bold}
+pre code span.ch /* Char           */ {color:#95e6cb}
+pre code span.cn /* Constant       */ {color:#ffee99}
+pre code span.co /* Comment        */ {color:#626a73; font-style: italic}
+pre code span.cv /* CommentVar     */ {color:#ffee99}
+pre code span.do /* Documentation  */ {color:#626a73}
+pre code span.dt /* DataType       */ {color:#ff8f40}
+pre code span.dv /* DecVal         */ {color:#e6b450}
+pre code span.er /* Error          */ {color:#ff3333; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#59c2ff; font-weight: bold}
+pre code span.fl /* Float          */ {color:#e6b450}
+pre code span.fu /* Function       */ {color:#ffb454}
+pre code span.im /* Import         */ {color:#c2d94c}
+pre code span.in /* Information    */ {color:#e6b450}
+pre code span.kw /* Keyword        */ {color:#ff8f40; font-weight: bold}
+pre code span.op /* Operator       */ {color:#f29668}
+pre code span.ot /* Others         */ {color:#39bae6}
+pre code span.pp /* Preprocessor   */ {color:#f07178}
+pre code span.re /* RegionMarker   */ {color:#59c2ff; background-color:#173649}
+pre code span.sc /* SpecialChar    */ {color:#95e6cb}
+pre code span.ss /* SpecialString  */ {color:#95e6cb}
+pre code span.st /* String         */ {color:#c2d94c}
+pre code span.va /* Variable       */ {color:#39bae6}
+pre code span.vs /* VerbatimString */ {color:#c2d94c}
+pre code span.wa /* Warning        */ {color:#f07178}

inst/highlight-styles/ayu-light.scss

@@ -0,0 +1,32 @@
+pre {background-color: #fafafa;}
+pre code         /* Normal         */ {color:#575f66}
+pre code span.al /* Alert          */ {color:#f51818; background-color:#faefef; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#e6ba7e}
+pre code span.at /* Attribute      */ {color:#399ee6}
+pre code span.bn /* BaseN          */ {color:#ff9940}
+pre code span.bu /* BuiltIn        */ {color:#4cbf99}
+pre code span.cf /* ControlFlow    */ {color:#fa8d3e; font-weight: bold}
+pre code span.ch /* Char           */ {color:#4cbf99}
+pre code span.cn /* Constant       */ {color:#a37acc}
+pre code span.co /* Comment        */ {color:#607880; font-style: italic}
+pre code span.cv /* CommentVar     */ {color:#a37acc}
+pre code span.do /* Documentation  */ {color:#607880}
+pre code span.dt /* DataType       */ {color:#fa8d3e}
+pre code span.dv /* DecVal         */ {color:#ff9940}
+pre code span.er /* Error          */ {color:#f51818; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#399ee6; font-weight: bold}
+pre code span.fl /* Float          */ {color:#ff9940}
+pre code span.fu /* Function       */ {color:#f2ae49}
+pre code span.im /* Import         */ {color:#86b300}
+pre code span.in /* Information    */ {color:#ff9940}
+pre code span.kw /* Keyword        */ {color:#fa8d3e; font-weight: bold}
+pre code span.op /* Operator       */ {color:#ed9366}
+pre code span.ot /* Others         */ {color:#55b4d4}
+pre code span.pp /* Preprocessor   */ {color:#f07171}
+pre code span.re /* RegionMarker   */ {color:#399ee6; background-color:#ddecf3}
+pre code span.sc /* SpecialChar    */ {color:#4cbf99}
+pre code span.ss /* SpecialString  */ {color:#4cbf99}
+pre code span.st /* String         */ {color:#86b300}
+pre code span.va /* Variable       */ {color:#55b4d4}
+pre code span.vs /* VerbatimString */ {color:#86b300}
+pre code span.wa /* Warning        */ {color:#f07171}

inst/highlight-styles/ayu-mirage.scss

@@ -0,0 +1,32 @@
+pre {background-color: #1f2430;}
+pre code         /* Normal         */ {color:#cbccc6}
+pre code span.al /* Alert          */ {color:#ff3333; background-color:#332430; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#ffe6b3}
+pre code span.at /* Attribute      */ {color:#73d0ff}
+pre code span.bn /* BaseN          */ {color:#ffcc66}
+pre code span.bu /* BuiltIn        */ {color:#95e6cb}
+pre code span.cf /* ControlFlow    */ {color:#ffa759; font-weight: bold}
+pre code span.ch /* Char           */ {color:#95e6cb}
+pre code span.cn /* Constant       */ {color:#d4bfff}
+pre code span.co /* Comment        */ {color:#5c6773; font-style: italic}
+pre code span.cv /* CommentVar     */ {color:#d4bfff}
+pre code span.do /* Documentation  */ {color:#5c6773}
+pre code span.dt /* DataType       */ {color:#ffa759}
+pre code span.dv /* DecVal         */ {color:#ffcc66}
+pre code span.er /* Error          */ {color:#ff3333; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#73d0ff; font-weight: bold}
+pre code span.fl /* Float          */ {color:#ffcc66}
+pre code span.fu /* Function       */ {color:#ffd580}
+pre code span.im /* Import         */ {color:#bae67e}
+pre code span.in /* Information    */ {color:#ffcc66}
+pre code span.kw /* Keyword        */ {color:#ffa759; font-weight: bold}
+pre code span.op /* Operator       */ {color:#f29e74}
+pre code span.ot /* Others         */ {color:#5ccfe6}
+pre code span.pp /* Preprocessor   */ {color:#f28779}
+pre code span.re /* RegionMarker   */ {color:#73d0ff; background-color:#2a4254}
+pre code span.sc /* SpecialChar    */ {color:#95e6cb}
+pre code span.ss /* SpecialString  */ {color:#95e6cb}
+pre code span.st /* String         */ {color:#bae67e}
+pre code span.va /* Variable       */ {color:#5ccfe6}
+pre code span.vs /* VerbatimString */ {color:#bae67e}
+pre code span.wa /* Warning        */ {color:#f28779}

inst/highlight-styles/breeze-dark.scss

@@ -0,0 +1,32 @@
+pre {background-color: #232629;}
+pre code         /* Normal         */ {color:#cfcfc2}
+pre code span.al /* Alert          */ {color:#95da4c; background-color:#4d1f24; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#3f8058}
+pre code span.at /* Attribute      */ {color:#2980b9}
+pre code span.bn /* BaseN          */ {color:#f67400}
+pre code span.bu /* BuiltIn        */ {color:#7f8c8d}
+pre code span.cf /* ControlFlow    */ {color:#fdbc4b; font-weight: bold}
+pre code span.ch /* Char           */ {color:#3daee9}
+pre code span.cn /* Constant       */ {color:#27aeae; font-weight: bold}
+pre code span.co /* Comment        */ {color:#7a7c7d}
+pre code span.cv /* CommentVar     */ {color:#7f8c8d}
+pre code span.do /* Documentation  */ {color:#a43340}
+pre code span.dt /* DataType       */ {color:#2980b9}
+pre code span.dv /* DecVal         */ {color:#f67400}
+pre code span.er /* Error          */ {color:#da4453; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#0099ff; font-weight: bold}
+pre code span.fl /* Float          */ {color:#f67400}
+pre code span.fu /* Function       */ {color:#8e44ad}
+pre code span.im /* Import         */ {color:#27ae60}
+pre code span.in /* Information    */ {color:#c45b00}
+pre code span.kw /* Keyword        */ {color:#cfcfc2; font-weight: bold}
+pre code span.op /* Operator       */ {color:#3f8058}
+pre code span.ot /* Others         */ {color:#27ae60}
+pre code span.pp /* Preprocessor   */ {color:#27ae60}
+pre code span.re /* RegionMarker   */ {color:#2980b9; background-color:#153042}
+pre code span.sc /* SpecialChar    */ {color:#3daee9}
+pre code span.ss /* SpecialString  */ {color:#da4453}
+pre code span.st /* String         */ {color:#f44f4f}
+pre code span.va /* Variable       */ {color:#27aeae}
+pre code span.vs /* VerbatimString */ {color:#da4453}
+pre code span.wa /* Warning        */ {color:#da4453}

inst/highlight-styles/breeze-light.scss

@@ -0,0 +1,32 @@
+pre {background-color: #ffffff;}
+pre code         /* Normal         */ {color:#1f1c1b}
+pre code span.al /* Alert          */ {color:#bf0303; background-color:#f7e6e6; font-weight: bold}
+pre code span.an /* Annotation     */ {color:#ca60ca}
+pre code span.at /* Attribute      */ {color:#0057ae}
+pre code span.bn /* BaseN          */ {color:#b08000}
+pre code span.bu /* BuiltIn        */ {color:#644a9b; font-weight: bold}
+pre code span.cf /* ControlFlow    */ {color:#1f1c1b; font-weight: bold}
+pre code span.ch /* Char           */ {color:#924c9d}
+pre code span.cn /* Constant       */ {color:#aa5500}
+pre code span.co /* Comment        */ {color:#898887}
+pre code span.cv /* CommentVar     */ {color:#0095ff}
+pre code span.do /* Documentation  */ {color:#607880}
+pre code span.dt /* DataType       */ {color:#0057ae}
+pre code span.dv /* DecVal         */ {color:#b08000}
+pre code span.er /* Error          */ {color:#bf0303; text-decoration: underline}
+pre code span.ex /* Extension      */ {color:#0095ff; font-weight: bold}
+pre code span.fl /* Float          */ {color:#b08000}
+pre code span.fu /* Function       */ {color:#644a9b}
+pre code span.im /* Import         */ {color:#ff5500}
+pre code span.in /* Information    */ {color:#b08000}
+pre code span.kw /* Keyword        */ {color:#1f1c1b; font-weight: bold}
+pre code span.op /* Operator       */ {color:#ca60ca}
+pre code span.ot /* Others         */ {color:#006e28}
+pre code span.pp /* Preprocessor   */ {color:#006e28}
+pre code span.re /* RegionMarker   */ {color:#0057ae; background-color:#e0e9f8}
+pre code span.sc /* SpecialChar    */ {color:#3daee9}
+pre code span.ss /* SpecialString  */ {color:#ff5500}
+pre code span.st /* String         */ {color:#bf0303}
+pre code span.va /* Variable       */ {color:#0057ae}
+pre code span.vs /* VerbatimString */ {color:#bf0303}
+pre code span.wa /* Warning        */ {color:#bf0303}