revealjs,brand - support for font family size and customization for monospace{,-inline,-block}

Author: cscheid

src/core/sass/brand.ts

@@ -355,13 +355,14 @@ const brandTypographyBundle = (
       ["size", "code-font-size"],
       // forward explicitly to both `code` and `pre`
       // because that interacts less with the default bootstrap styles
-      ["color", "code-color"],
+      ["color", "code-color"], // this is also revealjs
       ["color", "pre-color"],
 
       ["weight", "font-weight-monospace"],
 
       // revealjs
       ["size", "code-block-font-size"],
+      ["color", "code-block-color"],
     ],
     "monospace-block": [
       // bootstrap + revealjs

src/resources/formats/revealjs/quarto.scss

@@ -13,6 +13,14 @@ $presentation-font-size-root: 40px !default;
 $presentation-font-smaller: 0.7 !default;
 $presentation-line-height: 1.3 !default;
 
+// Default variables which exist in bootstrap themes
+// and are here to simplify the implementation of _brand.yml and
+// user theming customization in general
+$font-weight-base: 400 !default;
+$code-font-size: $presentation-font-size-root !default;
+$font-family-monospace-block: $font-family-monospace !default;
+$font-family-monospace-inline: $font-family-monospace !default;
+
 // main colors
 $body-bg: #fff !default;
 $body-color: #222 !default;
@@ -66,10 +74,11 @@ $presentation-list-bullet-color: $body-color !default;
 // code blocks
 $code-block-bg: $body-bg !default;
 $code-block-border-color: lighten($body-color, 60%) !default;
-$code-block-font-size: 0.55em !default;
+$code-block-font-size: ($code-font-size * 0.55) !default;
 $code-block-height: 500px !default;
 $code-block-theme-dark-threshhold: 40% !default;
 $code-block-line-height: $presentation-line-height !default;
+$code-block-color: $body-color !default;
 
 // inline code
 $code-color: var(--quarto-hl-fu-color) !default;
@@ -146,6 +155,8 @@ $heading3Size: $revealjs-h3-font-size !default;
 $heading4Size: $revealjs-h4-font-size !default;
 
 $codeFont: $font-family-monospace !default;
+$inlineCodeFont: $font-family-monospace-inline !default;
+$blockCodeFont: $font-family-monospace-block !default;
 
 // Links and actions
 $linkColor: $link-color !default;
@@ -169,19 +180,12 @@ $kbd-font-size: $presentation-font-size-root !default;
 $kbd-color: $body-color !default;
 $kbd-bg: $gray-100 !default; // like in bootstrap style
 
-// Default variables which exist in bootstrap themes
-// and are here to simplify the implementation of _brand.yml and
-// user theming customization in general
-$font-weight-base: 400 !default;
-$code-font-size: $presentation-font-size-root !default;
-
 // variables required by _brand.yml
 $font-family-monospace-block: $font-family-monospace !default;
 $font-family-monospace-inline: $font-family-monospace !default;
 $font-weight-monospace: $font-weight-base !default;
 $font-weight-monospace-block: $font-weight-monospace !default;
 $font-weight-monospace-inline: $font-weight-monospace !default;
-$code-block-font-size: $code-font-size !default;
 $code-inline-font-size: $code-font-size !default;
 
 /*-- scss:functions --*/
@@ -318,6 +322,7 @@ div.reveal div.slides section.quarto-title-block {
 
 .reveal code {
   color: $code-color;
+  font-size: $code-inline-font-size;
   background-color: $code-bg;
   white-space: pre-wrap;
 }
@@ -334,7 +339,8 @@ div.reveal div.slides section.quarto-title-block {
 
 .reveal pre code {
   background-color: $body-bg;
-  color: $body-color;
+  font-size: $code-block-font-size;
+  color: $code-block-color;
 }
 
 .reveal .column-output-location {

src/resources/formats/revealjs/reveal/css/theme/template/exposer.scss

@@ -20,8 +20,10 @@
   --r-heading3-size: #{$heading3Size};
   --r-heading4-size: #{$heading4Size};
   --r-code-font: #{$codeFont};
+  --r-inline-code-font: #{$inlineCodeFont}; /* quarto-specific */
+  --r-block-code-font: #{$blockCodeFont}; /* quarto-specific */
   --r-link-color: #{$linkColor};
-  --r-link-color-dark: #{darken($linkColor , 15% )};
+  --r-link-color-dark: #{darken($linkColor, 15%)};
   --r-link-color-hover: #{$linkColorHover};
   --r-selection-background-color: #{$selectionBackgroundColor};
   --r-selection-color: #{$selectionColor};

src/resources/formats/revealjs/reveal/css/theme/template/theme.scss

@@ -174,7 +174,6 @@
 
 	text-align: left;
 	font-size: 0.55em;
-	font-family: var(--r-code-font);
 	line-height: 1.2em;
 
 	word-wrap: break-word;
@@ -183,12 +182,13 @@
 }
 
 .reveal code {
-	font-family: var(--r-code-font);
+	font-family: var(--r-inline-code-font);
 	text-transform: none;
 	tab-size: 2;
 }
 
 .reveal pre code {
+	font-family: var(--r-block-code-font);
 	display: block;
 	padding: 5px;
 	overflow: auto;