50

About:

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.

Old Screenshot (Last 3 tags not shown):

This script in action

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

Download / Install:

Install the script from GitHub: Install

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

  • 1
    Nice work, Brock! – Mathias Bynens Apr 24 '12 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!) – Mentalist Feb 19 '17 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. – Brock Adams Feb 19 '17 at 8:39
  • 1
    @BrockAdams Thank you for the tip! I was looking in Extensions and that's why I didn't see it. All set now. :-) – Mentalist Feb 19 '17 at 9:01
5

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)

feature in action

|improve this answer|||||
  • Added with version 4.0. – Brock Adams Jun 17 '18 at 5:38
11


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
function addbutton(text,callback,identify,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 :)

|improve this answer|||||
  • @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. – Manishearth Apr 25 '12 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 – Manishearth May 4 '12 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) – Manishearth May 4 '12 at 7:00
  • Finally rolled this into the script with version 2.0. – Brock Adams Feb 12 '17 at 22:17
2

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

|improve this answer|||||
  • Done with version 3.0. – Brock Adams May 13 '18 at 21:29
2

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

The icon can just be

|improve this answer|||||
  • 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... – Brock Adams Jun 17 '18 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 '18 at 22:40
1

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)

|improve this answer|||||
1

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:

enter image description here

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)

enter image description here

|improve this answer|||||
1

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.

|improve this answer|||||
  • 1
    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. – Brock Adams Jan 15 '19 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 '19 at 3:08
  • @BrockAdams LOOK AT MY PROFILE! I EDIT IT DAILY! xD – WELZ Jan 15 '19 at 3:09
  • But the em-space... – WELZ Jan 15 '19 at 3:12
  • Forgot how easy the workaround could be. Should be fixed with version 4.3. – Brock Adams Jan 15 '19 at 5:16
1

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

B in Dark mode

|improve this answer|||||
New contributor
CrazyCoder is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .