Add styling to kbd shortcode keyboard shortcuts in Revealjs presentations

[c-zippel]

Description

It'd be neat if keyboard shortcuts produced with the kbd shortcode in Reveal presentations were styled similarly to those in HTML documents, with a grey background and outline, rather than as normal slide text.

In HTML:

In Reveal:

Thank you for considering this feature request!

.qmd for the screenshots

---
format: 
  html: default
  revealjs: 
    output-file: revealjs.html
---

## Keyboard Shortcut

Here's a keyboard shortcut: {{< kbd Ctrl+S >}}

[cderv]

Thanks for the report. Definitely something that should be available for reveal too.

For now the styling is tied to boostrap output

quarto-cli/src/resources/formats/html/bootstrap/_bootstrap-rules.scss

Lines 195 to 203 in 99a56e4

	// tweaking default keyboard settings
	kbd,
	.kbd {
	color: $body-color;
	background-color: $gray-100;
	border: 1px solid;
	border-radius: 5px;
	border-color: $table-border-color;
	}

I'll look on how to port that correctly to be available for reveal js too.

Note to self: The kbd shortcode extension has a CSS but it is empty

quarto-cli/src/resources/extensions/quarto/kbd/resources/kbd.css

Lines 1 to 2 in 41501dd

	kbd.kbd {
	}

[mcanouil]

To note, some related opened issues:

• Monospace font for kbd tad/shortcode is not pretty #5879
• kbd shortcode has accessibility issues #5403

[mcanouil]

Closing this in favour of the opened issue:

• Add styling to kbd shortcode keyboard shortcuts in Revealjs presentations #6012