275

How are people showing keyboard "glyphs" on Super User? I looked at the Markdown help page and it didn't show anything regarding this.

Here is an example. (question has been deleted since this was asked, so an archive link is provided instead):

enter image description here

3
  • 3
    A very easy way to find this out would have been click the edit button on a post where you see this and look at their code. – Jasper Dec 21 '12 at 17:38
  • @Jasper: sure, but I was specifically wondering if this was something implemented in stackoverflow's flavor of Markdown. Turned out it was just straight up html – Jorge Israel Peña Dec 22 '12 at 2:03
  • 1
    @JorgeIsraelPeña In fact, the "magic" isn't in the html. but in the css and could have been applied to a span just as easily. – Jasper Dec 22 '12 at 5:00
304

You need to use the <kbd> HTML tag:

<kbd>CTRL</kbd>+<kbd>Z</kbd>

becomes CTRL+Z

4
  • 10
    Note that these don't work in comments but appears as <kbd>CTRL</kbd>. – Deanna Jul 30 '12 at 14:28
  • 3
    Or, now that mid 2012 these sites started being HTML5, the w3.org recommended way would be <kbd><kbd>CTRL</kbd>+<kbd>Z</kbd></kbd>... But yes, that is ugly here! (And yes, it's just a recommendation...) – Arjan Sep 30 '12 at 15:33
  • 25
    Hmm <kbd>kbd stopped working in comments</kbd> – bobobobo Oct 18 '12 at 14:13
  • 5
    @bobobobo HTML isn't allowed in comments :( – Joel Mellon Feb 23 '16 at 16:22
53

If you want to reference special keys such as ⌘ Command, you can use these special characters:

Mac:

  • ⌥ Option <kbd>⌥ Option</kbd> <kbd>⌥</kbd>
  • ⌃ Control <kbd>⌃ Control</kbd> <kbd>⌃</kbd>
  • ⇧ Shift <kbd>⇧ Shift</kbd> <kbd>⇧</kbd>
  • ⌘ Command <kbd>⌘ Command</kbd> <kbd>⌘</kbd>
  • ⎋ Escape <kbd>⎋ Escape</kbd> <kbd>⎋</kbd>
  • ⇪ Caps lock <kbd>⇪ Caps lock</kbd> <kbd>⇪</kbd>
  • ⇥ Tab <kbd>⇥ Tab</kbd> <kbd>⇥</kbd>
  • ⏏︎ Eject ⏏︎ <kbd>⏏︎ Eject</kbd> <kbd>⏏︎</kbd>
  • ⌫ Delete <kbd>⌫ Delete</kbd> <kbd>⌫</kbd>

You can always access these symbols via Character Viewer on a Mac:

  1. Edit > Emoji & Symbols Space
  2. You'll find these under the Symbols > ⌘ Technical Symbols list
20

<kbd> elements are way intrusive For great humor.

10

Additionally, if you have formatting questions like that, you can look at the source of the post to see what markup was used (by clicking edit).

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .