# <kbd>, Superscript and Subscript, markup shortcuts

This script adds buttons and keyboard shortcuts that make it easy to add/remove:

• <kbd> tags
• Superscripts and subscripts
• <del> tags
• <br> tags
• &emsp;

when editing posts.

### To use:

Click 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.

Likewise for the Superscript and Subscript tags, the keyboard shortcuts are Alt and Alt (Up arrow and Down arrow).

The delete (semantic strikethrough) shortcut is AltX.
While breaks (<br>) are inserted via click or the AltB shortcut.
And &emsp;s use AltM.

Tags are wrapped and unwrapped the same way that other markup (Bold, Italic, etc.) is -- including how whitespace and nested tags are handled.

Update: <kbd> now wraps in word mode. So Ctrl P becomes <kbd>Ctrl</kbd> <kbd>P</kbd>, etc.
All other tags wrap normally (unless they don't have an end tag).

Requires Tampermonkey, Violentmonkey, or equivalent userscript engine.

### Code:

Find the source on GitHub at: BrockA/SE-misc/Add_kbd_sup_sub_shortcuts.user.js

You may also make bug reports, pull-requests, etc. there.

Inspired by the question, "Markdown syntax for <kbd>foo</kbd>".

• Nice work, Brock! Apr 24, 2012 at 7:10
• I was shown an error message saying to check my browser's console, and when I did there was this message: "This version of the "StackExchange, Add kbd shortcut" script is broken and obsolete. Please uninstall it and (optionally) install the fixed and upgraded script." But what I can't figure out is how to uninstall my current version. There is nothing about it in the README file, nor is it listed with my other Firefox add-ons. I installed it long ago and don't even remember how I installed it to begin with. Can you please document the steps for uninstalling? (P.S. great add-on!) Feb 19, 2017 at 8:16
• @Mentalist Okay, I put a task to add such instructions in my todo list. Meanwhile, for Firefox from the Add-ons manager (Ctrl Shift A), you should see a "Userscripts" entry in the left-hand column. Click it and then you can search for kbd and use the remove button. Feb 19, 2017 at 8:39
• @BrockAdams Thank you for the tip! I was looking in Extensions and that's why I didn't see it. All set now. :-) Feb 19, 2017 at 9:01

Wrt the <kbd></kbd> insertion, how about this simple scenario: user has Shift+Alt+P and wants to convert it to Shift+Alt+P

Current scenario: user highlights all three keys individually and highlights them one by one. Boring! :(

Proposed scenario: user highlights the entire string (Shift+Alt+P) at once, presses Alt-K, and voila! It converts to Shift+Alt+P :D

Implementation problems: I don't think there should be any. We only need to split the text selection by - or + characters, apply formatting individually to each one of them, and give the result back.

GIF of this feature: (thanks to WELZ)

• Added with version 4.0. Jun 17, 2018 at 5:38

Why not use this to add the button? It preserves the integrity of other buttons, and ensures that a button does not get added twice (for example, when in the review section, it will only add the buttons to the editors which don't have it.

//params: text: text of button
//params: callback: a function which takes id of textarea as argument(useful in review section etc when there are multiple textareas) and does the magic encoded in the button
//identify: a unique identifier (for each type of button), that ensures that buttons are not added twice
//pic: optional background pic
//Callback must take id of textarea as argument.
$.each($('.wmd-container').not(".canhasbutton"+identify),function(){
try{
tid=$(this).find("[id^=wmd-input]")[0].id; row=$(this).find("[id^=wmd-button-row]")[0];
lastel=$(row).find(".wmd-button").not(".wmd-help-button").filter(":last"); if(lastel.length>0){ px=parseInt(lastel[0].style.left.replace("px",""))+25; //add code for background-position of span as well later btn='<li class="wmd-button" style="left: '+px+'px; " onclick="'+callback+'(\''+tid+'\')"><span style="background-image:url('+pic+');">'+text+'</span></li>'; //TODO: do via jQuery$(btn).insertAfter(lastel);
}
this.className+=" canhasbutton"+identify;
}catch(e){}
})
}


Then you add a live listener for this (you already have, it seems).

It just makes it extensible :)

• @Brock no problem. Or, if I get time today, I'll forkfix this ;-). Even better, I'll put it in the real git so that you can fork it/see diffs. Apr 25, 2012 at 0:49
• @Brock I have a working version used in stackapps.com/questions/3373/mathjax-buttons. This can be easily extended--add your kbd handler to the //methods section. (via window.kbd=InsertKbdTag, where InsertKbdTag is the function copied from your script), and add an entry to buttonconfig May 4, 2012 at 3:31
• @Brock note that it interferes with your kbd buttons, so you may want to disable it(my script). Otherwise the buttons will be useless (keyboard shortcuts won't be, though) May 4, 2012 at 7:00
• Finally rolled this into the script with version 2.0. Feb 12, 2017 at 22:17

Can you please add in strike-through <del>text</del> and Line break <br />

• Done with version 3.0. May 13, 2018 at 21:29

Can you please add in [tag:something] (to work like the other features)

The icon can just be

• Running out of room for icons, and this is yet another kind of beastie, so may have to wait for version 5 (with customizable dialog). But I have wanted this for myself more than once... Jun 17, 2018 at 21:33
• For now you can add in a dropdown menu titled more for the other new ones until 5 is ready.
– Welz
Jun 17, 2018 at 22:40

I've added a fix to point 3 over here (it's forked)

It deals with <kbd>[selected text]</kbd> and [<kbd>text</kbd>], where the [] denotes selection.

It will not deal with wierd stuff like <kb[d>text</kbd>]. (Could be done using regexes)

I have a slow internet, so the webpage loading circle may still keep spinning while the #wmd-input textbox has already loaded. In this case, I've noticed that if I place my cursor into the textbox before the page loads, there are two instances of the five set of buttons that get inserted into my toolbar. Here's a screenshot:

Below is the markup as seen in Chrome DevTools, notice how all .tmAdded buttons have been duplicated. Also, notice those li#wmd-spacerX that have been inserted into the markup (and that are causing those grey vertical lines in the photo above)

The entire extension doesn't function properly in the profile editor (/users/edit/{UserID}).

I can click on all of the buttons but nothing happens. (GIF)

This is probably related to this.

• Well, thats annoying. Can't you be like me and never edit your profile? Seriously, I might wait until the 21st, to see if your MSE post gets results, and then address this if still needed. Jan 15, 2019 at 3:07
• @BrockAdams that's what I was thinking... wait to see if whatever fix they do/don't put forth will solve this.
– Welz
Jan 15, 2019 at 3:08
• @BrockAdams LOOK AT MY PROFILE! I EDIT IT DAILY! xD
– Welz
Jan 15, 2019 at 3:09
• But the em-space...
– Welz
Jan 15, 2019 at 3:12
• Forgot how easy the workaround could be. Should be fixed with version 4.3. Jan 15, 2019 at 5:16

There is an issue with the new Dark theme on StackOverflow site, all the custom buttons now have B button background: