How to adjust highlighting style?

[MMJansen]

Can we change the highlighting style? For example, have a background color, or change text color, or make it italic? If so, how? If not, wouldn't that be a nice idea?
Related, can we change the way the annotations are shown? For instance, now is "black" the background color for layout overlay. Is that adjustable for users?

[andrewpbray]

Hello @MMJansen !

(apologies for the delay - I didn't realized I hadn't signed up for email notifications from this forum!)

For now the best way to do all of this (the highlighting effects and the different colors for the different sections) is to tinker around with _extensions/closeread/closeread.css. For instance, here is where you'll find what happens during a highlight:

closeread/_extensions/closeread/closeread.css

Lines 48 to 67 in 2ec55c9

	.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within .sourceCode span[id^=cb] {
	opacity: 0.3;
	transition: opacity linear 0.3s;
	}
	.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within .sourceCode span[id^=cb].cr-hl {
	opacity: 1;
	transition: opacity linear 0.3s;
	}
	.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within div.line-block span[id^=lb] {
	color: rgba(0, 0, 0, 0.4);
	transition: color 0.7s linear;
	}
	.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within div.line-block span[id^=lb].cr-hl {
	color: rgb(0, 0, 0);
	transition: color 0.7s linear;
	}
	.cr-section .sticky-col .sticky-col-stack .cr-active.cr-hl-within div.line-block span[id^=lb] span.cr-hl {
	color: rgb(0, 0, 0);
	transition: color 0.7s linear;
	}

Take a look at the selectors: they distinguish between whether its a line block lb or a code block cb and a whether its the highlighted thing itself .cr-hl or the block that contains the highlighting .cr-hl-within. In general, the within stuff is faded out, and while the highlighted stuff stays fully saturated.

The css will be much easier to read and modify once Quarto v1.6 comes out. That will allow us to store this all as an .scss file, which will make things a whole lot simpler.