remark-kbd-plus

This JS plugin for remark parses custom Markdown syntax to handle keyboard keys in the format ++Cmd+Alt+M++ similar to used in the Python Markdown extension pymdownx.

It adds a new node type to the mdast produced by remark: kbd. While pymdownx.keys itemizes the single keys and allows creation of nested objects, remark-kbd-plus currently places the strings wrapped in ++ into one kbd node. If you are using rehype, the stringified HTML result will be <kbd>.

Syntax

Hit ++Enter++ twice to create a new paragraph.

AST (see mdast specification)

Kbd (Parent) represents a reference to a user.

interface Kbd <: Parent {
  type: "kbd";
}

For example, the following markdown:

++Cmd+Alt+M++

Yields:

{
  type: 'kbd',
  children: [{
    type: 'text',
    value: 'Cmd+Alt+M'
  }]
}

Rehype

This plugin is compatible with rehype. Kbd mdast nodes will become <kbd>Cmd+Alt+M</kbd>.

Installation

npm:

npm install remark-kbd-plus

Usage

Dependencies:

const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

const remarkKbd = require('remark-kbd-plus')

Usage:

unified()
  .use(remarkParse)
  .use(remarkKbd)
  .use(remark2rehype)
  .use(stringify)

Changelog

• 2019-04-14

Copyright

remark-kbd-plus © 2019 Adam Twardoch Based on remark-kbd © Zeste de Savoir

License

MIT