<kbd> tag does not render in notebook

[JarnoRFB]

Using <kbd></kbd> in Jupyter notebook renders to a keyboard key markup like Ctrl. In the Jupyter lab notebook, nothing really happens. Could be related to #1812 .

[jasongrout]

Fixing this (and other tags mentioned in #1812 such as sup/sub, colspan/rowspan) should be very straightforward, so tagging this as a good first issue. These tags just need to be added to the security whitelist:

jupyterlab/packages/apputils/src/sanitizer.ts

Line 64 in e377acd

.concat('h1', 'h2', 'img', 'span', 'audio', 'video', 'del'),

Here is another PR that did exactly this for the del tag: #3771

PRs adding kbd and the other tags above to the whitelist are more than welcome!

[reevejd]

I've opened a PR here: #4618

[jasongrout]

Fixed by #4618.

[domoritz]

It looks like we can use kbd now but the default style is not great. Could you add some CSS to make it look more like a keyboard button?

[ian-r-rose]

Nice idea. I'm going to reopen this as a good first issue. There is some sample <kbd> CSS here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd , which somebody could use as inspiration (though I personally think the dropshadows are a bit much in that example).

A new jp-RenderedHTML kbd rule would be added here:

jupyterlab/packages/rendermime/style/index.css

Line 164 in a6d2934

| RenderedHTML

[bollwyvl]

Just to throw it out, blueprint does provide styling of kbd: https://blueprintjs.com/docs/#core/components/hotkeys.dialog However, I am highly against making bp part of the renderedhtml dependency chain, as then we're right back in bootstrap land, and I would like to keep the eventual lab-forward nbconvert target as lean as we can make it. I actually like the dropshadow, but the fake 3d shine is gross. GitHub also has a nice one: https://help.github.com/en/articles/using-keyboard-shortcuts Anyhow, whatever ends up happening, it should expose some theme variables so that a theme author can make them look like Atari buttons or whatever. Pew pew pew!

[domoritz]

I sent a PR at #6025.