Help panel: <kbd> tag

For the first time, I've wanted to use the <kbd> tag in the Editor's help panel. And for the first time, I've noticed that the tag is not formatted. In the following example the ⤡, Done and Cancel should all look like buttons (which is how that tag is usually formatted):


Here is an example format from the MDN page for that tag:


And here is the matching CSS:

kbd {
    font-family: monospace;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;

It would be really nice to have that option for the help panel and indeed for other panels such as the markdown ones.

Finally, here is an example from the help panel with the above style applied:


We do already have the css class help-key for this.

<span class="help-key">Enter</span>


And a quick test shows <kbd class="help-key"> also works.

So you could add that class to get the formatting you want today, and if someone does a PR to apply the same styles to kbd then you won't need the class in the future.

1 Like

Great, thanks Nick. I'll try to remember to do a PR when I get a chance as I think that it is probably easier to remember the tag than it is a custom class.