Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 420
David Jorquera Avatar asked Oct 22 '19 14:10

David Jorquera


People also ask

How do you use KBD tags?

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).

What is kbd element in HTML?

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

How do you define keyboard input?

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


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>
like image 121
David Jorquera Avatar answered Sep 25 '22 17:09

David Jorquera