Skip to main content
Original userscripts site is down, replaced link with mirror
Source Link
Ray Mairlot
  • 29.4k
  • 11
  • 15
Source Link
CodeManX
  • 29.7k
  • 11
  • 12

Thanks iKlsR, I created a Greasemonkey script based on your code, which inserts a new button automatically:

// ==UserScript==
// @name        Add <kbd> Button to StackExchange Toolbar
// @namespace   http://blender.org
// @include     *.stackexchange.com/*
// @version     1
// @grant       none
// ==/UserScript==

var toolbar;
function toolbar_wait() {
    toolbar = document.getElementById('wmd-button-row');
    if (toolbar == null) {
        window.setTimeout(toolbar_wait, 500);
    } else {
        toolbar_add();
    }
}
toolbar_wait();

function insert_kbd()
{
    var txta = document.getElementById('wmd-input');
    if (txta.selectionStart == null) return;
    var chars = txta.value.split("");
    chars.splice(txta.selectionStart, 0, '<kbd>');
    chars.splice(txta.selectionEnd + 1, 0, '</kbd>');
    txta.value = chars.join("");
    toolbar_update();
}

function toolbar_add() {
    
    var style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    style.innerHTML = '#wmd-kbd-button:hover {background-color: #deedff;}';
    document.body.appendChild(style);
    
    var li = document.createElement('li');
    li.onclick = insert_kbd;
    li.setAttribute('style', 'font-size: 9pt; left: 400px;');
    li.setAttribute('title', 'Keyboard Shortcut <kbd>')
    li.setAttribute('id', 'wmd-kbd-button')
    toolbar.appendChild(li);
    li.className = 'wmd-button';
    
    var span = document.createElement('span');
    span.innerHTML = 'kbd';
    span.setAttribute('style', 'background-image:none;');
    li.appendChild(span);
}

function toolbar_update() {

    var element = document.getElementById('wmd-input');
    
    var keyboardEvent = document.createEvent("KeyboardEvent");
    var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";


    keyboardEvent[initMethod](
                   "keydown", // event type : keydown, keyup, keypress
                    true, // bubbles
                    true, // cancelable
                    window, // viewArg: should be window
                    false, // ctrlKeyArg
                    false, // altKeyArg
                    false, // shiftKeyArg
                    false, // metaKeyArg
                    17, // keyCodeArg : unsigned long the virtual key code, else 0
                    0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
    );
    element.dispatchEvent(keyboardEvent);
    
}

Install: http://userscripts.org/scripts/show/486617

I added a hack to simulate a keydown event (ctrl) to make the live markdown preview update. Tested and working in Firefox 28.