@mirrordown/remd-kbd

Part of Mirrordown — a suite of markdown syntax extensions for the unified and markdown-it ecosystems.

A remark/rehype (unified) plugin for the kbd syntax extension.

Overview

The kbd plugin renders [[key]] as an HTML <kbd> element, representing keyboard input or a key name.

<kbd>key</kbd>

Syntax

Wrap a key name in double square brackets:

Press [[Enter]] to confirm.

You can combine multiple keys: [[Ctrl]] + [[Shift]] + [[P]] opens the command palette.

Install

npm install @mirrordown/remd-kbd

Unified

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { remarkKbd } from "@mirrordown/remd-kbd";

const processor = unified()
  .use(remarkParse)
  .use(remarkKbd)
  .use(remarkRehype)
  .use(rehypeStringify);

Astro

// astro.config.ts
import { defineConfig } from "astro/config";
import { remarkKbd } from "@mirrordown/remd-kbd";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkKbd]
  }
});

VitePress

// .vitepress/config.ts
import { defineConfig } from "vitepress";
import { remarkKbd } from "@mirrordown/remd-kbd";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkKbd]
  }
});

Documentation

Full documentation, more examples, and configuration options: github.com/mirrordown/mirrordown (dedicated docs site coming soon).

License

MIT © Drake Costa