Kbd Plugin

@ampernic/markdown-it-kbd renders [[x]] as <kbd>x</kbd>. A TypeScript rewrite of the classic markdown-it-kbd with a typed public API and a couple of quality-of-life options.

📦 Install

npm install @ampernic/markdown-it-kbd

The package is also published to the private Forgejo registry:

@ampernic:registry=https://altlinux.space/api/packages/ampernic/npm/

🚀 Usage in VitePress

// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress'
import kbd from '@ampernic/markdown-it-kbd'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(kbd)
    },
  },
})

📖 Syntax

Press [[Ctrl]] + [[C]] to copy

Renders as:

Press Ctrl + C to copy

Parsing rules

• The closing ]] must be on the same line as the opening [[.
• Nested [[ before the closing ]] cancels the match.
• Inline Markdown still applies inside [[...]]: [[*Ctrl*]] -> <kbd><em>Ctrl</em></kbd>.
• Keystrokes inside inline and fenced code stay literal.

Options

Passed as the second argument to md.use(kbd, options):

Name	Type	Default	Description
tag	string	'kbd'	Wrapping tag emitted for a keystroke
className	string	-	Class added to the wrapping tag. Omit for no class

Example with options

md.use(kbd, { tag: 'span', className: 'kbd-key' })
// [[Ctrl]] -> <span class="kbd-key">Ctrl</span>