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):
asked Jul 15, 2009 at 8:58
-
4A 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.– JasperDec 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– Jorge Israel PeñaDec 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.– JasperDec 22, 2012 at 5:00
Add a comment
|
5 Answers
You need to use the <kbd> HTML tag:
<kbd>CTRL</kbd>+<kbd>Z</kbd>
becomes CTRL+Z
answered Jul 15, 2009 at 9:00
-
12Note that these don't work in comments but appears as <kbd>CTRL</kbd>.– DeannaJul 30, 2012 at 14:28
-
3Or, 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...)– ArjanSep 30, 2012 at 15:33 -
25
-
5
-
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:
- Edit > Emoji & Symbols ⌃⌘Space
- You'll find these under the Symbols > ⌘ Technical Symbols list
<kbd> elements are way intrusive For great humor.
-
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.– gfullamApr 29, 2022 at 19:38
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).
In the new Stacks Editor, the shortcut Keyboard Ctrl-' is introduced.
Reference: https://github.com/StackExchange/Stacks-Editor/issues/51
Using the new shortcut you are able to create the Keyboard Glyphs in the editor.
Screenshot for reference:
GIF for reference:
answered Oct 3, 2022 at 20:19
