Keyboard’s Keys Feature

You might have found that when you explain a procedure that requires typing keyboard shortcuts then it is difficult to make those shortcut stand out.

Story has a shortcode for you that will sort you out.

Keyboard Keys that stand out:

Let’s consider the following shortcode sequence in your markdown article:

{{< kbd-key keyCode="ctrl" />}} + {{< kbd-key keyCode="a" />}}

If you enable keyboard-keys rendering with the feature-[no]kbd-keys flag (see “features”), then the required CSS will be loaded and the result will be displayed as follows:

Now keyboard shortcut really stand out in your text.

Dark Theme:

You can also choose to use a dark theme by adding the dark keyword to your keyCode as shown below:

{{< kbd-key keyCode="dark alt" />}} + {{< kbd-key keyCode="dark f4" />}}

which will display as:

More about specific keys:

Key “names” that you can use with the “kbd-key” shortcode include:

Function Keys:
From “f1” to “f12” in lower case:
…
Numbers:
From “zero” to “nine” in text:
…
Alphabetical Keys:
From “a” to “z” in lower case:
…
Media Keys:
Like “eject”…
Misc Control Keys:
Like “tab”, “shift”, “ctrl”, “alt”, “space”, “return”, “delete”…
OS Specific Keys:
Like “option”, “win”, “cmd”…