micromark extension to support kbd
element syntax with
configurable delimiters, escaping, var
sequences, and arbitrary
nesting (e.g. Ctrl + key).
Docs at shivjm.github.io/remark-extensions.
This package is ESM only:
Node 18+ is needed to use it and it must be import
ed instead of require
d.
npm:
npm install micromark-extension-kbd-nested
import {micromark} from 'micromark'
import {
html,
syntax
} from 'micromark-extension-kbd-nested';
const output = micromark('Press ||| ||Ctrl|| + || \| || |||, then || //key// ||.', {
extensions: [syntax()],
htmlExtensions: [html]
})
console.log(output)
Yields:
<p>Press <kbd><kbd>Ctrl</kbd> + <kbd>|</kbd></kbd>, then <kbd><var>key</var></kbd>.</p>
Recognizes any sequence of two or more unescaped occurrences of
delimiter
(defaults to |
) as a keyboard sequence.
||| ||Ctrl|| + ||x|| |||
will
be turned into Ctrl + x.<kbd>|</kbd>
:||\|||
|| | ||
|| | ||
++|++
(with a delimiter of +
)++ | ++
(with a delimiter of +
)variableDelimiter
(defaults to /
) can be used within keyboard
sequences to mark variable sections.
This package exports the following identifiers: html
, syntax
.
There is no default export.
html
Extension for micromark to compile as <kbd>
and <var>
elements
(can be passed in htmlExtensions
).
syntax(options?)
Returns an extension for micromark to parse keyboard sequences
optionally containing variable sequences (can be passed in
extensions
).
Do not pass characters that are already being processed specially as the delimiters.
options
Name | Description | Default |
---|---|---|
delimiter |
Character to use as delimiter | ` |
variableDelimiter |
Character to use as variable delimiter | / |
micromark extension to support
kbd
element syntax with configurable delimiters, escaping,var
sequences, and arbitrary nesting (e.g. Ctrl + key).Warning: Do not set delimiters to characters that already being processed specially. This will result in undefined behaviour.
Syntax
Keyboard sequences
Recognizes any sequence of two or more unescaped occurrences of delimiter (defaults to
|
) as a keyboard sequence.||| ||Ctrl|| + ||x|| |||
will yield Ctrl + x.<kbd>|</kbd>
:||\|||
|| | ||
|| | ||
++|++
(with a delimiter of+
)++ | ++
(with a delimiter of+
)Variable sequence
Recognizes sequences of two occurrences of delimiter (defaults to
/
) within keyboard sequences as mark variable sections.