KBD polish and instertion proposal

[L0Lock]

Hi there!

Besides KBD being not supported with the new Dillo version, I think a little more CSS polish would be nice, KBDs were not very clear in the last versions, so here's a quick mockup of how it could be so much more efficient with a quick css shot:

kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    background-color: #242429;
    border: 1px solid #2f3037;
    border-radius: 3px;
    overflow-wrap: break-word;
    font-size: 11px;
    line-height: 1.4;
}

Additionally, I'd like to propose to take some inspiration from the Blender.Stackexchange users:

They made a script that allows you to convert any selected element into kbd tags by pressing CtrlY, and it also recognizes keywords like "alt" "mmb" "ctrl" to garnish them with a little icon in front of them. Icons are either Unicode when possible, or custom icons (especially useful for the mouse buttons in Blender 😉)

I.E. if I just write these:

LMB MMB RMB ctrl shift alt y win

I just have to select them and hit CtrlY to get this:

It simply replaces the selection by a complete markdown/html insertion:

<kbd>![LMB][LMB] LMB</kbd><kbd>![MMB][MMB] MMB</kbd><kbd>![RMB][RMB] RMB</kbd><kbd>&#9096; Ctrl</kbd><kbd>&#8679; Shift</kbd><kbd>&#9095; Alt</kbd><kbd>y</kbd><kbd>![Windows key][WIN]</kbd><kbd></kbd>

  [LMB]: http://i.stack.imgur.com/FwrAW.png (Left Mouse Button)

  [MMB]: http://i.stack.imgur.com/OASpJ.png (Middle Mouse Button)

  [RMB]: http://i.stack.imgur.com/LPwD4.png (Right Mouse Button)

  [WIN]: http://i.imgur.com/AAjIi.png (Windows key)

I think this is something Dillo could somewhat do as well.

The userscript: https://gist.github.com/gandalf3/468e3704132a18dab7875341cca68571

The topic describing it: https://blender.meta.stackexchange.com/a/391/53447