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.