Keyboard HTML tag sometimes suppressed in CSS

Support

AI-generated summary

A bug was reported in the discussion title “Keyboard HTML tag sometimes suppressed in CSS”. The issue occurs when nesting HTML and Markdown inside the <kbd> tag, specifically when using backticks to display code.

barreeeiroo provided an example where the <small> tag with a Markdown link inside <kbd> is not displayed. joffreyjaffeux suggested removing the backticks around the link text, which fixes the issue but doesn’t fulfill the user’s requirement of displaying it as code.

joffreyjaffeux created a reduced repro and tested it on markdown-it.github.io, which suggests it’s a platform-specific issue. Mittineague proposed a solution of not nesting HTML and Markdown, but this doesn’t meet the user’s requirements.

The issue is due to a CSS rule added by awesomerobot, which sets display: none for all elements inside <kbd>. This is a design choice to protect against abuse vectors, and can be overridden in a theme component if desired.

1

There’s a little bug when using “a lot” of text formatting elements :sweat_smile:
Check this example:

Builder Version: 1.0.0 Makeroid Andromeda :star2:

You see that I’ve used the <kbd> tag, right?
Well, I’ve used some more things, but I can’t see them:

# <kbd> [Builder](http://builder.makeroid.io) Version: `1.0.0` <small>[`Makeroid Andromeda`](https://community.makeroid.io/t/makeroid-andromeda/5031?u=barreeeiroo) :star2: </small></kbd>

Why is the <small>[`Makeroid Andromeda`](https://community.makeroid.io/t/makeroid-andromeda/5031?u=barreeeiroo) :star2: </small> part not being displayed?

2

Builder Version: 1.0.0 Makeroid Andromeda :star2:

remove the “`” around “Makeroid Andromeda”.

3

But I want to show it as “code” :sweat_smile:
I know it’s working without it

4

Might be an issue on our end as it’s working on https://markdown-it.github.io

Not sure we want to spend time debugging such an edgy case, what do you think @sam ?

Also here is a reduced repro:

<kbd><small>[`A`](B)</small></kbd>

A

<kbd><small>[A](B)</small></kbd>

A

5

The simple solution is to not nest HTML and Markdown eg.

<kbd> <a href="http://builder.makeroid.io">Builder</a> Version: 1.0.0 <small><a href="https://community.makeroid.io/t/makeroid-andromeda/5031?u=barreeeiroo">Makeroid Andromeda</a> :star2: </small></kbd>

Builder Version: 1.0.0 Makeroid Andromeda :star2:

6

No it’s still not the expected result. You are not wrapping “Makeroid Andromeda” in “`”

If I do this, it disappears as the other:
Builder Version: 1.0.0 Makeroid Andromeda :star2:

7

This is by design @awesomerobot added:

kbd * * * {
    display: none;
}

To protect us from all sorts of abuse vectors.

Note: on your forum you can remove the rule in a theme component, by overriding it, if you do not care for the abuse protection.