# Keyboard HTML tag sometimes suppressed in CSS

**URL:** https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787
**Category:** Support
**Created:** [6월 13, 2018, 2:45오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787 "2018-06-13T14:45:57Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![barreeeiroo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barreeeiroo/32/165264_2.png) [@barreeeiroo](https://meta.discourse.org/u/barreeeiroo)
#### Post date: [6월 13, 2018, 2:45오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/1 "2018-06-13T14:45:57Z")

</div>

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

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

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?

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [6월 13, 2018, 3:01오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/2 "2018-06-13T15:01:53Z")

</div>

[Builder](http://builder.makeroid.io) Version: `1.0.0` [Makeroid Andromeda](https://community.makeroid.io/t/makeroid-andromeda/5031?u=barreeeiroo) 🌟

remove the “`” around “Makeroid Andromeda”.

---

<div class="post-metadata">

### Author: ![barreeeiroo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barreeeiroo/32/165264_2.png) [@barreeeiroo](https://meta.discourse.org/u/barreeeiroo)
#### Post date: [6월 13, 2018, 3:13오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/3 "2018-06-13T15:13:55Z")

</div>

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

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [6월 13, 2018, 3:19오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/4 "2018-06-13T15:19:17Z")

</div>

Might be an issue on our end as it’s working on [https://markdown-it.github.io](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:

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

```

`A`

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

```

A

> **[markdown-it demo](https://markdown-it.github.io/#md3=%7B%22source%22%3A%22%3Ckbd%3E%3Csmall%3E%5B%60A%60%5D%28B%29%3C%2Fsmall%3E%3C%2Fkbd%3E%22%2C%22defaults%22%3A%7B%22html%22%3Atrue%2C%22xhtmlOut%22%3Afalse%2C%22breaks%22%3Afalse%2C%22langPrefix%22%3A%22language-%22%2C%22linkify%22%3Atrue%2C%22typographer%22%3Atrue%2C%22_highlight%22%3Atrue%2C%22_strict%22%3Afalse%2C%22_view%22%3A%22html%22%7D%7D)**

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [6월 13, 2018, 6:33오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/5 "2018-06-13T18:33:25Z")

</div>

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](http://builder.makeroid.io) Version: `1.0.0` [Makeroid Andromeda](https://community.makeroid.io/t/makeroid-andromeda/5031?u=barreeeiroo) 🌟

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [6월 13, 2018, 6:49오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/6 "2018-06-13T18:49:25Z")

</div>

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](http://builder.makeroid.io) Version: `1.0.0` [`Makeroid Andromeda`](https://community.makeroid.io/t/makeroid-andromeda/5031?u=barreeeiroo) 🌟

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [6월 13, 2018, 10:43오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/7 "2018-06-13T22:43:06Z")

</div>

This is by design @awesomerobot added:

```plaintext
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.

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [6월 13, 2018, 10:54오후 UTC](https://meta.discourse.org/t/keyboard-html-tag-sometimes-suppressed-in-css/89787/8 "2018-06-13T22:54:38Z")

</div>


