doc: implement fancier rendering for keys

[Trott]

Minimal CSS and markup changes to implement special rendering for
<kbd> elements.

Checklist

• documentation is changed or added
• commit message follows commit guidelines

[Trott]

Before:

After:

[Trott]

@nodejs/website What do people think of this? @devsnek suggested it in another PR, and I kind of like it, but also like the simplicity of simply bolding the key name and leaving it at that (the "before" state above). On the other hand, we could go even further and copy the CSS for the <kbd> used by MDN, which I rather like and renders like this:

[devsnek]

Also this https://snek.dev/keyboard

[nschonni]

I like the MDN style personally, but I notice they're also wrapping the whole keystroke in an <kbd> as well https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd#Representing_keystrokes_within_an_input

[bnb]

I generally like the MDN / GitHub style (see below). I'm generally fine with any of the proposed solutions, though.

GitHub Style

[Trott]

I like the MDN style personally, but I notice they're also wrapping the whole keystroke in an <kbd> as well

Yeah, the standard says that's optional (apparently for clarity) and that "Such precision isn't necessary". I like it semantically, but dislike it from a making-our-markdown-even-more-complex standpoint. I can go either way.

[nschonni]

Side thought, this could probably be "enforced" through the remark-node-preset by looking for a regex

[silverwind]

Would also suggest either copying MDN style or adding a subtle box-shadow below so it looks like a key.

[Trott]

Landed in aa3746d