How to Show Keystrokes in a wikiHow Article Using Keypress

Two Parts:Using the TemplateKnowing the Possible Keys

If you've been editing or writing many computer-related articles, you may have tried to show keyboard shortcuts to make things easier for the reader. Standardizing these has been difficult, but with the Keypress template, shortcuts and keystroke notation can become uniform across all of wikiHow. Implementing them in your articles and edits only takes a few moments. See Step 1 below to learn how.

Part 1
Using the Template

  1. 1
    Understand what Keypress does. The Keypress template applies specific CSS style to emulate the look of a keyboard key. It is especially useful for articles with keyboard shortcuts, such as Ctrl+Alt+Del and Shift+F1. You can use Mac-specific keys as well, such as Command+ Option+Esc.
    • Since Keypress generates the "key" effect through CSS instead of images, pages load quickly and wikiHow formatting is not affected.
  2. 2
    Review wikiHow template basics. To use a template in wikiHow, format your parameters like this: {{templatename|parameter}}. You can add multiple parameters by adding a vertical pipe ( | ) between each one. The template will then attempt to format the parameters according to the template's rules. To use the the Keypress template, you would type {{keypress|key1}}. See this article for more details on basic template usage.
  3. 3
    Determine if your target is a combined shortcut or sequential keys. Keypress can automatically generate multi-key shortcuts and display "+" signs between each key. You can add multiple keys by using a vertical pipe to separate each one in the template. If you want keystrokes to be shown as sequential, or one after the other, each key will need a separate template.
  4. 4
    Learn the parameter formatting. The parameters of the Keypress template are the keys that you are displaying. Function keys can be written without capitalization. For example, entering "ctrl" into the template will produce the same results as "Ctrl": Ctrl.
    • For letters, you will need to capitalize the letter in the template if you want it to mimic the look of a standard keyboard (almost all keyboards have capital letters on the keys). For example, entering "h" will display h. Instead, enter "H" to display H.
    • Typing "up", "down", "left", or "right" will display the related arrow key:
    • For a full list of supported keys, see the Keypress template page.
  5. 5
    Apply the template to a key or keys. Find the reference to the key or shortcut in the article editor. Replace the key or keys with the following formatting, depending on if it's a multi-key shortcut or sequential keys:
    • Combined shortcut: {{keypress|ctrl|alt|del}} → Ctrl+Alt+Del. The template can handle up to 10 keys in one shortcut.
    • Sequential keys: {{keypress|A}}{{keypress|B}}{{keypress|C}} → ABC. You can do this as many times as you'd like, but avoid using it to refer to typing. Instead use the <code></code> tags.
  6. 6
    Preview before publishing. Before you make your final changes, use the Preview function to make sure that your templates were entered correctly and that the keys are displayed as they should.
  7. 7
    Keep a keypress entry from wrapping around. The keypress template can break if it wraps around a line break, causing it to look awkward. If your keypress template is wrapping, surround it with the following tags: <span style="white-space: nowrap;"></span>.
    • For example: <span style="white-space: nowrap;">{{keypress|Ctrl|C}}</span>

Part 2
Knowing the Possible Keys

  1. 1
    Know your options for wiki markup characters.
    • Some wiki markup characters, like the pipe symbol, the semicolon and the equals sign, need to be put into the template as an HTML entity: &#124;, &#59;, &#61; respectively:
      • {{keypress|&#124;}} → |
      • {{keypress|&#59;}} → ;
      • {{keypress|&#61;}} → =
    • Alternatively, if the characters are marked up as wikilinks, they can be entered directly:
      • {{keypress|[[[[pipe||]]]]}} → |
      • {{keypress|[[[[;]]]]}} → ;
      • {{keypress|[[[[=]]]]}} → =
    • Most markup characters also have aliases and these can be used as well:
      • {{keypress|pipe}} → |
      • {{keypress|semicolon}} → ;
      • {{keypress|equals}} → =
      • {{keypress|colon}} → :
      • {{keypress|asterisk}} → *
      • {{keypress|hash}} → #
  2. 2
    Use the icon-based keyboard keys available. Some key names have an associated Unicode character. The keypress template automatically adds "icons" to many key names, including: (See, also, Arrows below.)
    • {{keypress|^Control}} → ^ Control
    • {{keypress|Ctrl}} → Ctrl
    • {{keypress|Alt}} → Alt
    • {{keypress|Shift}} → Shift
    • {{keypress|Esc}} → Esc
    • {{keypress|Tab}} → Tab
    • {{keypress|Enter}} → Enter
    • {{keypress|Return}} → Return
    • {{keypress|-Return}} → Return
    • {{keypress|Option}} → Option
    • {{keypress|Opt}} → Opt
    • {{keypress|Compose}} → Compose
    • {{keypress|Command}} → Command
    • {{keypress|Cmd}} → Cmd
    • {{keypress|Ins}} → Ins
    • {{keypress|Del}} → Del
    • {{keypress|Backspace}} → Backspace
    • {{keypress|Home}} → Home
    • {{keypress|End}} → End
    • {{keypress|PgUp}} → PgUp
    • {{keypress|PgDn}} → PgDn
    • {{keypress|Num Lock}} → Num
    • {{keypress|Caps Lock}} → Caps Lock
    • {{keypress|Scroll Lock}} → Scroll
    • {{keypress|Prt Scr}} → PrtScr
    • {{keypress|Prtsc}} → PrtScr
    • {{keypress|Pause}} → Pause
    • {{keypress|Break}} → Break
  3. 3
    Be aware of the Windows limitations on certain keys. There are no characters for the Windows key and Menu key. The Windows logo is trademarked. This template shows approximate characters for them in the following way:
    • {{keypress|Win}} → Win
    • {{keypress|Menu}} → Menu
  4. 4
    Use the "key" parameter when you want no words in your outcome. If "key" is included at the end of any template parameter, only a symbol and no text is output: (See, also, Arrows below.)
    • {{keypress|^Control key}} → ^
    • {{keypress|Ctrl key}} → ^
    • {{keypress|Alt key}} →
    • {{keypress|Shift key}} →
    • {{keypress|Esc key}} →
    • {{keypress|Tab key}} →
    • {{keypress|Enter key}} →
    • {{keypress|Return key}} →
    • {{keypress|-Return key}} →
    • {{keypress|Option key}} →
    • {{keypress|Opt key}} →
    • {{keypress|Compose key}} →
    • {{keypress|Command key}} →
    • {{keypress|Cmd key}} →
    • {{keypress|Ins key}} →
    • {{keypress|Del key}} →
    • {{keypress|Backspace key}} →
    • {{keypress|Home key}} →
    • {{keypress|End key}} →
    • {{keypress|PgUp key}} →
    • {{keypress|PgDn key}} →
    • {{keypress|Num Lock key}} →
    • {{keypress|Caps Lock key}} →
    • {{keypress|Scroll Lock key}} →
    • {{keypress|Prt Scr key}} →
    • {{keypress|Prtsc key}} →
    • {{keypress|Pause key}} →
    • {{keypress|Break key}} →
  5. 5
    Adjust the template for arrows, depending on what you want to display.There is a little difference with arrow keys encoding. They are coded as:
    • For full arrows and words, use:
      • {{keypress|Up key}} → Up
      • {{keypress|Down key}} → Down
      • {{keypress|Left key}} → Left
      • {{keypress|Right key}} → Right
    • For dotted arrows and words, use:
      • {{keypress|.Up}} → Up
      • {{keypress|.Down}} → Down
      • {{keypress|.Left}} → Left
      • {{keypress|.Right}} → Right
    • For just full arrows, use:
      • {{keypress|Up}} →
      • {{keypress|Down}} →
      • {{keypress|Left}} →
      • {{keypress|Right}} →
    • For just dotted arrows, use:
      • {{keypress|.Up key}} →
      • {{keypress|.Down key}} →
      • {{keypress|.Left key}} →
      • {{keypress|.Right key}} →
  6. 6
    Use video game keys, where they're available. Video game controllers often have specialized input labels that do not map easily. The following are mappings for various game consoles and input features.
    • The following should only be used when the input sequence uses something other than the primary input or mixes input between directional devices.
      • {{keypress|l-down}} → L↓
      • {{keypress|c-left}} → C←
      • {{keypress|r-up}} → R↑
    • Stick specific diagonals are also supported:
      • {{keypress|l-nw}} → L↖
      • {{keypress|c-se}} → C↘
      • {{keypress|r-ne}} → R↗
    • PlayStation keys are possible, too:
      • {{keypress|ex}} → ×
      • {{keypress|circle}} →
      • {{keypress|triangle}} →
      • {{keypress|square}} →


  • The Windows key logo cannot be displayed due to trademarks. Instead, you will see a looped square Win similar to the Mac Command key.
  • While the key effects and letters will be displayed in all browsers, not all symbols will appear in some circumstances. Instead the viewer will see rectangles, but the key readability will remain unchanged. For best viewing experience, use a Firefox browser.

Article Info

Categories: Making and Using Templates