292

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, 2012 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, 2012 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, 2012 at 5:00

4 Answers 4

321

You need to use the <kbd> HTML tag:

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

becomes CTRL+Z

5
  • 12
    Note that these don't work in comments but appears as <kbd>CTRL</kbd>.
    – Deanna
    Jul 30, 2012 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, 2012 at 15:33
  • 25
    Hmm <kbd>kbd stopped working in comments</kbd>
    – bobobobo
    Oct 18, 2012 at 14:13
  • 5
    @bobobobo HTML isn't allowed in comments :( Feb 23, 2016 at 16:22
  • kbd.hsuan.xyz Hi, I made a tool to capture shortcuts and generate kbd tags.
    – Hsuan Lee
    Apr 26 at 9:05
63

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
22

<kbd> elements are way intrusive For great humor.

1
  • I wanted to vote this down for not being an answer, but I was so glad I clicked through the link. No down vote from me.
    – gfullam
    Apr 29 at 19:38
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 .