Menu
I am using reveal.js to create an HTML-based presentation. I would like to insert the keyboard symbols like those provided by SO and Github by using the <kbd>SPACE</kbd> syntax resulting in this glyph: SPACE.
I have tried using the reveal.js mechanism for inserting Markdown, but to no avail -- the word SPACE just shows up as regular text. reveal.js relies marked.js but I could not find anything about this in its documentation either. I have a hard time figuring out how SO and Github achieve this.
389
You can use CSS to style the tag. There's an article on how to style the kbd tags just like StackOverflow.
Example:
kbd {
padding:0.1em 0.6em;
border:1px solid #ccc;
font-size:11px;
font-family:Arial,Helvetica,sans-serif;
background-color:#f7f7f7;
color:#333;
-moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin:0 0.1em;
text-shadow:0 1px 0 #fff;
line-height:1.4;
white-space:nowrap;
}<kbd>Space</kbd>You need to define CSS styles to tell the browser how to display the contents of the <kdb> tag. For example, using the inspect dev tool of my browser, I can see that SO uses a number of CSS rules to create the border/background color/shadow of the tag.
Without those CSS rules, the tag would simply display as plain text on SO as well. In fact, using this simple document:
<html>
<head>
<title>Example</title>
</head>
<body>
<p>
I would like to insert the keyboard symbols like those provided by
SO and Github by using the <kbd>SPACE</kbd> syntax resulting in this
glyph: <kbd>SPACE</kbd>.
</p>
</body>
</html>
We can see that the only "default" styles provided by the browser is setting font-family: monospace:
26
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
