Skip to main content
1 of 16
Brock Adams
  • 13k
  • 5
  • 39
  • 64

<kbd> markup shortcuts

Inspired by the question, "Markdown syntax for <kbd>foo</kbd>", this script adds both a button and a keyboard shortcut to each post's <textarea> (when editing posts).

Press the button or press AltK on the keyboard and <kbd></kbd> will be inserted at the cursor.
If text is selected, it will be wrapped by the <kbd> tags instead.

Tested the script on both Firefox and Chrome (might work for Opera too).

To install, click here (Add_kbd_shortcut.user.js install at Github).

To preview the source, click here (Add_kbd_shortcut.user.js preview at Github).


Known limitations, possible future enhancements:

  1. When pressing the button, the preview does not immediately update. Make any other changes to the text (normal editing), and the preview catches up.
    The keyboard shortcut always updates the preview instantaneously.

  2. If text with trailing space(s) is selected, the spaces get wrapped, with <kbd> too. This is different from the other markup shortcuts.
    EG: If foo  is selected, the wrapped product will be <kbd>foo </kbd>, not <kbd>foo</kbd> .

  3. This shortcut does not reverse itself. For example, if foo is selected, pressing AltK once yields <kbd>foo</kbd>. Pressing it again yields <kbd><kbd>foo</kbd></kbd>.

  4. For very low rep users, the newbie AJAX notifications can erase the shortcut button. The keyboard shortcut continues to work though.

Brock Adams
  • 13k
  • 5
  • 39
  • 64