Custom <kbd> style for Jekyll / Github Pages

[ jekyll ]

Lots of sites that use Markdown define a <kbd>...</kbd> tag for formatting keypresses, with Stack Exchange and GitHub being the flavors I have most experience with. However, Jekyll/GitHub Pages doesn’t seem to provide such a style by default.

So, I made one: Ctrl+Alt+Del. It’s noticeably different from the major other styles already out there (e.g., here), and is considerably less flashy than some. But, it works, to my eye at least.

To enable it, just add this somewhere in styles.scss in the root of your Github Pages repo (tweak as desired):

kbd {
  border-style: outset;
  border-width: 2px;
  border-color: #999999;
  border-radius: 6px;
  padding: 3px;
  font-size: 75%;
  font-weight: 475;
  background-color: #f8f8f8;
  margin: 2px;
  white-space: nowrap;
}

This post was written with StackEdit.

Written on June 7, 2018