How do I edit this website?

Keyboard Shortcuts

The key include enables declaration of keyboard shortcuts in a clear way.

Single keys

The syntax for talking about a key such as ↵ Enter is:

{% include key key="enter" %}

You can describe mouse actions such as Right Click, too:

{% include key key="right click" %}

See the list of input codes below for a complete summary of available key and mouse codes.

Key combinations

You can declare a combination of keys such as ⌃ Ctrl + C by separating them with | symbols:

Code

{% include key keys="ctrl|c" %}

Result

⌃ Ctrl + C

Keyboard styles

By default, keys are rendered in a platform-agnostic way, but you can use the style parameter to render the keys to better match certain keyboards.

Code

| Default   | {% include key key="ctrl|tab" %}             |
| PC style  | {% include key key="ctrl|tab" style="pc" %}  |
| Mac style | {% include key key="ctrl|tab" style="mac" %} |

Result

Default ⌃ Ctrl + ⇥ Tab
PC style ⌃ Ctrl + ↹ Tab
Mac style ⌃ control + ⇥ tab

Special code for OS-dependent Ctrl/Command

Frequently, keyboard combos using ⌃ Ctrl on Windows and Linux will instead use ⌘ command on macOS. There is a special key code, ctlcmd, which can be used in this circumstance to succinctly communicate this fact via a tooltip, to avoid needing a parenthetical note about macOS every time.

Code

{% include key keys="ctlcmd|L" %}

Result

⌃ Ctrl / ⌘ ⌃ Ctrl on a PC ⌘ command on a Mac  + L

Custom chain symbols

Finally, if you want to connect a key combination together with something other than the default + symbol, you can use the chain parameter to do something different:

Code

{% include key keys="ctrl|shift|esc" chain="⛓" %}

Result

⌃ Ctrl⛓⇧ Shift⛓⎋ Esc

List of input codes

Key code Default style PC style Mac style
Menu ≣ Menu ≣ Menu ≣ menu
Hyper ✦ Hyper ✦ Hyper ✦ hyper
Meta ◆ Meta ◆ Meta ◆ meta
Windows ⊞ Windows ⊞ Windows ⊞ windows
Command ⌘ Command ⌘ Command ⌘ command
Super ❖ Super ⊞ Windows ⌘ command
Fn Fn Fn fn
AltGr AltGr AltGr altgr
Ctrl ⌃ Ctrl ⌃ Ctrl ⌃ control
Ctlcmd ⌃ Ctrl / ⌘ ⌃ Ctrl on a PC ⌘ command on a Mac ⌃ Ctrl / ⌘ ⌃ Ctrl on a PC ⌘ command on a Mac ⌃ Ctrl / ⌘ ⌃ Ctrl on a PC ⌘ command on a Mac
Alt ⌥ Alt ⌥ Alt ⌥ option
Option ⌥ Option ⌥ Option ⌥ option
Shift ⇧ Shift ⇧ Shift ⇧ shift
Num Lock Num Lock Num Lock num lock
Caps Lock ⇪ Caps Lock ⇪ Caps Lock ⇪ caps lock
Scroll Lock Scroll Lock Scroll Lock scroll lock
Print Screen Print Screen Print Screen print screen
Eject ⏏ Eject ⏏ Eject ⏏ eject
Enter ↵ Enter ↵ Enter ⏎ enter
Enter2 ⌤ Enter ⌤ Enter ⌤ enter
Backspace ⌫ Backspace ⌫ Backspace ⌫ delete
Delete ⌦ Delete ⌦ Delete ⌦ delete
Insert Insert Insert insert
Esc ⎋ Esc ⎋ Esc ⎋ esc
Right → Right → Right → right
Left ← Left ← Left ← left
Up ↑ Up ↑ Up ↑ up
Down ↓ Down ↓ Down ↓ down
Page Up ⇞ Page Up ⇞ Page Up ⇞ page up
Page Down ⇟ Page Down ⇟ Page Down ⇟ page down
Home ↖ Home ↖ Home ↖ home
End ↘ End ↘ End ↘ end
Tab ⇥ Tab ↹ Tab ⇥ tab
Space Bar ␣ Space ␣ Space ␣ space
Clear ⌧ Clear ⌧ Clear ⌧ clear
F1 F1 F1 F1
⋮⋮⋮⋮
F20 F20 F20 F20
A A A A
⋮⋮⋮⋮
Z Z Z Z
Bar | | |
Backslash \ \ \
Left Click Left Click Left Click left click
Middle Click Middle Click Middle Click middle click
Right Click Right Click Right Click right click
Double Click Double Click Double Click double click
Left Drag Left Drag Left Drag left drag
Middle Drag Middle Drag Middle Drag middle drag
Right Drag Right Drag Right Drag right drag
Mouse Wheel Mouse Wheel Mouse Wheel mouse wheel
Mouse Wheel Up Mouse Wheel Up Mouse Wheel Up mouse wheel up
Mouse Wheel Down Mouse Wheel Down Mouse Wheel Down mouse wheel down