Keyboard Shortcuts

Learn how to display keyboard keys and shortcuts with visual styling

Keyboard Shortcuts

Keyboard shortcuts provide visual representation of keyboard keys, making it easy to document hotkeys and key combinations in tutorials.

Basic Usage

Use ::kbd[key] to display a keyboard key:

Press Enter to submit.

Key Combinations

Combine multiple keys with + to show shortcuts:

Press Ctrl + C to copy.

Press Ctrl + V to paste.

Common Modifier Keys

Windows/Linux

  • Ctrl - Control key
  • Alt - Alt key
  • Shift - Shift key
  • Win - Windows key

macOS

  • Cmd - Command key
  • Option - Option key
  • Shift - Shift key
  • Control - Control key

Special Keys

  • Home - Go to beginning
  • End - Go to end
  • PageUp - Scroll up
  • PageDown - Scroll down

Action Keys

  • Enter - Confirm/Submit
  • Escape - Cancel/Exit
  • Tab - Next field
  • Backspace - Delete backward
  • Delete - Delete forward
  • Space - Space bar

Function Keys

Function keys work great for shortcuts:

Press F1 for help.

Press F5 to refresh.

Press F11 for fullscreen.

Press F12 to open developer tools.

Arrow Keys

You can use symbols or text for arrow keys:

Navigate with ↑, ↓, ←, → arrow keys.

Or use text labels:

Use Up and Down to navigate the menu.

In Lists

Create keyboard shortcut cheat sheets:

Text Editing Shortcuts

  • Ctrl + C - Copy selected text
  • Ctrl + X - Cut selected text
  • Ctrl + V - Paste from clipboard
  • Ctrl + Z - Undo last action
  • Ctrl + Y - Redo last undone action
  • Ctrl + A - Select all
  • Ctrl + F - Find text

File Operations

  • Ctrl + N - New file
  • Ctrl + O - Open file
  • Ctrl + S - Save file
  • Ctrl + Shift + S - Save as
  • Ctrl + W - Close file
  • Ctrl + P - Print

In Tables

Compare shortcuts across platforms:

Action Windows/Linux macOS
Copy Ctrl + C Cmd + C
Paste Ctrl + V Cmd + V
Cut Ctrl + X Cmd + X
Undo Ctrl + Z Cmd + Z
Save Ctrl + S Cmd + S
Find Ctrl + F Cmd + F
Quit Alt + F4 Cmd + Q

Multi-Key Sequences

For complex shortcuts with multiple keys:

Press Ctrl + K followed by Ctrl + S to save all files.

Press Ctrl + K then Ctrl + O to open folder.

Real-World Examples

Git Tutorial

Initialize a new repository:

git init
Bash

Stage your changes:

  1. Press Ctrl + S to save your file
  2. Run git add . to stage all changes

Commit your changes:

  • Press Ctrl + Enter in your editor
  • Or run git commit -m "Your message"

VS Code Shortcuts

Master these essential keyboard shortcuts:

Navigation

  • Ctrl + P - Quick file open
  • Ctrl + Shift + P - Command palette
  • Ctrl + B - Toggle sidebar
  • Ctrl + ` - Toggle terminal

Editing

  • Ctrl + D - Select next occurrence
  • Ctrl + / - Toggle comment
  • Alt + ↑ - Move line up
  • Alt + ↓ - Move line down

Search

  • Ctrl + F - Find in file
  • Ctrl + H - Replace in file
  • Ctrl + Shift + F - Find in files

Browser Shortcuts

Essential browser navigation:

Action Shortcut
New tab Ctrl + T
Close tab Ctrl + W
Reopen closed tab Ctrl + Shift + T
Next tab Ctrl + Tab
Previous tab Ctrl + Shift + Tab
Developer tools F12
Refresh F5
Hard refresh Ctrl + F5

Platform-Specific Instructions

To save your work:

  • Windows/Linux: Press Ctrl + S
  • macOS: Press Cmd + S

To quit the application:

  • Windows/Linux: Press Alt + F4
  • macOS: Press Cmd + Q

Alphanumeric Keys

Individual letter and number keys:

Press A through Z for letters.

Press 0 through 9 for numbers.

Switch to tab 1, 2, or 3 using number keys.

Best Practices

Be Clear and Consistent

✅ Good:

  • Use consistent formatting throughout your documentation
  • Press Ctrl + C to copy

❌ Avoid:

  • Mixing different notation styles
  • Press Ctrl+C or use Ctrl + C or Ctrl + C

Specify the Platform

When shortcuts differ across platforms, always specify:

✅ Good: Save the file with Ctrl + S on Windows/Linux or Cmd + S on macOS.

❌ Avoid: Save the file with Ctrl + S (assumes all users are on Windows/Linux).

Organize shortcuts by category:

File Operations

  • Ctrl + N - New file
  • Ctrl + O - Open file
  • Ctrl + S - Save file

Editing

  • Ctrl + C - Copy
  • Ctrl + V - Paste
  • Ctrl + X - Cut

Use Tables for Comparisons

When showing platform differences, use tables:

Feature Windows Mac
Copy Ctrl + C Cmd + C
Paste Ctrl + V Cmd + V

Accessibility

Keyboard shortcuts are rendered with semantic <kbd> HTML elements that:

  • Work with screen readers
  • Support high contrast mode
  • Are keyboard navigable
  • Print well on paper

Styling

Keys automatically get:

  • 3D button appearance
  • Light and dark mode support
  • Proper spacing between keys
  • Monospace font
  • Visual hover effects

Syntax Reference

::kbd[key]
Markdown

Examples:

  • ::kbd[Enter] → Enter
  • ::kbd[Ctrl] → Ctrl
  • ::kbd[Ctrl] + ::kbd[C] → Ctrl + C
  • Inline Code: Use backticks for code: variable
  • Code Blocks: For multi-line code examples
  • Asides: For highlighting important notes
Back to Markdown Features