Add Inline Node for <kbd> HTML Tag

[tajmone]

It would be useful to have an inline node for keystrokes, to generate the <kbd> HTML tag.

Possible node tags: [key or just [k.

Example:

[k Ctrl] [k Shift] [k Z]

which would be rendered as:

Ctrl Shift Z

with HTML code:

<kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>Z</kbd>

(see below for an alternative node syntax)

Note that in the above example I've inserted spaces between the keys, but many people don't, while others insert the + symbol:

[k Ctrl][k Shift][k Z]

[k Ctrl]+[k Shift]+[k Z]

rendered as:

CtrlShiftZ

Ctrl+Shift+Z

... it's a matter of personal taste, but it should be kept into account in the implementation.

Multi-Keys Node

Also, not how Asciidoctor implements it via the Keyboard Macro:

kbd:[Ctrl+Shift+Z]

(rendered as: Ctrl+Shift+Z)

It's smart because it uses just one keyword to handle multiple keys, using + as a separator (two pluses + + will produce the + key).

So PML could also do that, and instead of the above proposed implementation, could instead:

[k Ctrl+Shift+Z]

CSS Styling

For some nice styling of the keys via ready-to-us CSS stylesheets, see:

• https://github.com/auth0/kbd — Live Demo
• https://github.com/shhdharmen/keyboard-css — Live Demo
• https://github.com/michaelhue/keyscss

IMO, the first link offers the best CSS effects for keys, and also provided different styles.

The second on is beautiful looking, but maybe not so practical for inline styling (keys are too big).

[pml-lang]

inline node for keystrokes

Yes, that's one more of the nodes to add soon (after the new parser is ready). Thanks.

A first syntax that comes to mind:

single key:
[key Z]

key combination:
[key Ctrl,Shift,Z]      // no space and no + between
[key Ctrl, Shift, Z]    // space between
[key Ctrl+Shift+Z]      // + between

Needs more thought before implementing. Suggestions are very welcome.

Thanks a lot for the useful links too.