How can I use HTML's <kbd> tag on rmarkdown?

user_8791635 0
Viewed 537

I have an ioslides presentation on rmarkdown. I would like to use the <kbd> tag to make keyboard looking keys. Is important to note that I want this outside a code chunk. In the document, I have written:

<kbd>CTRL</kbd> + <kbd>SHIFT</kbd> + <kbd>ENTER</kbd>

which should look like CTRL + SHIFT + ENTER, but it renders like there are no tags:

CTRL + SHIFT + ENTER

Is there a workaround to use this tag on a rmarkdown document, particularly on an ioslides presentation?

Here is a minimal reproducible example:

---
output: ioslides_presentation
---

## Keyboard tag problem
This doesn't render properly:
<kbd>CTRL</kbd> + <kbd>SHIFT</kbd> + <kbd>ENTER</kbd>
r-markdown r tags html
1 Answers

Turns out it didn't render with the expected format because this had to be specified in a css file. I used the one described here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd, that is very much like the one rendered in the stackoverflow style.

kbd {
    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;
   }
<kbd>This is the format I was looking for!</kbd>

user_87916350
Related