Keyboard HTML tag sometimes suppressed in CSS

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?

Builder Version: 1.0.0 Makeroid Andromeda :star2:

remove the “`” around “Makeroid Andromeda”.

1 Like

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

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

https://markdown-it.github.io/#md3={"source"%3A"<kbd><small>[`A`](B)<%2Fsmall><%2Fkbd>"%2C"defaults"%3A{"html"%3Atrue%2C"xhtmlOut"%3Afalse%2C"breaks"%3Afalse%2C"langPrefix"%3A"language-"%2C"linkify"%3Atrue%2C"typographer"%3Atrue%2C"_highlight"%3Atrue%2C"_strict"%3Afalse%2C"_view"%3A"html"}}

2 Likes

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:

2 Likes

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:

1 Like

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.

8 Likes