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>
The <kbd> tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font. Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).
<kbd>: The Keyboard Input element. The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
The phrase tag is used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser's default monospace font. In this article, we define the keyboard input by using various types of tags like <kbd>, <code>, <em>, <var>, and <samp>.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With