revealjs: Sass variables - How does how the $code-colorargument work?

[ThomasSchultze]

Hi everyone,

I was trying to play around with the code color in a revealjs presentation using a custom scss file. I do not understand how the $code-color argument works. Its default is var(–quarto-hl-fu-color). Can anyone explain what that means and what a custom value would look like?

Thanks!

[dragonstyle]

It looks like we're using the text highlighting theme's color (when we provide code highlighting via a theme, we also write CSS variables that could be used when coloring things with CSS that you'd like to be responsive to syntax highlighting). You should be able to set this to a simple CSS color:

$code-color: red
$code-color: #C06C84

Does that make sense?

[ThomasSchultze]

Makes sense, yes. But I am not sure what it does. It does not seem to change anything about the code in my presentations' code blocks.
Using $code-block-color: #C06C84 instead did the trick.

Thanks!

[mcanouil]

I am assuming, you are not at all familiar with Sass/SCSS.
Some examples of Reveal.js theme modifying this parameter and others:

• https://github.com/mcanouil/quarto-revealjs-storybook/blob/main/_extensions/storybook/storybook.scss
• https://github.com/beatrizmilz/quarto-rladies-theme/blob/main/_extensions/rladies/rladies.scss

[ThomasSchultze]

Yes, your assumption is correct. Tanks for the links, they are very helpful.
I am still not sure what the $code-color: #C06C84 option does. I thought it would change the color of the code in the code blocks, but it did not. Using $code-block-color: #C06C84 worked, however.

[mcanouil]

• $code-bg: colour for background of inline code
• $code-color: colour for the font of inline code
• $code-block-bg: colour for background of blocks of code
• $code-block-color: colour for the font of blocks of code
• $code-block-border-color: colour for the border of blocks of code

[mcanouil]

@ThomasSchultze if you have your answer, could you mark any of the two as the answer to let others know?

[JosiahParry]

For posterity, the available variables can be found at https://quarto.org/docs/presentations/revealjs/themes.html#sass-variables