283

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
  • 4
    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 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
313

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 :( Feb 23 '16 at 16:22
57

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
21

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