Adding kbd tag functionality to WordPress

The <kbd> tags on StackOverflow look awesome. They’re awesome for blogging about keyboard shortcuts. I’d been looking all over the place for these, while I actually stumbled upon Jimmy Peña’s implementation of the StackOverflow CSS for <kbd> tags. You can find his post here.

The custom css that makes this possible is this:

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;
}

Once added to your css/Wordpress theme, you can start using the kdb tags, which look like these in actual webpage:

Alt+F2

To use these in WordPress, you can do without modifying your theme, if you use a plugin named My Custom CSS.

You can simply paste the CSS code into a box in the plugin’s options page, and straightaway start using it.