Highlights in Quarto

I am a big fan of highlighting bits of text. Particularly in presentations where I have slides with long quotes on them.

Unfortunately Quarto does not have a native function to be able to do this. However by playing around with the custom.scss file we can add this in ourselves.

First we want to set the variables for the colors we are using throughout our website/slides/book etc. This needs to go in the /*-- scss:defaults --*/ section at the top of the custom.scss file. `

/*-- scss:defaults --*/
$theme-background: #FEF2CA;
$theme-text: #0C0C0C;

Then in the /*-- scss:rules --*/ section we set a custom class for highlights. What we are doing here is swapping around the the text and background color.

/*-- scss:rules --*/

.highlight-contrast{
  background-color: $theme-black;
  color: $theme-text;
}

And that’s it!

All we have to do is call this around any text we want highlighted. Like this:

[Text to highlight]{.highlight-contrast}

And it will be rendered like this.