Skip to content

Commit c3cb493

Browse files
reakaleekreakaleek
committed
Add ability to show alternate keys with '|'
1 parent 4d4690a commit c3cb493

File tree

4 files changed

+397
-137
lines changed

4 files changed

+397
-137
lines changed

‎docs/syntax/kbd.md‎

Lines changed: 49 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Keyboard shortcuts
22

3-
You can represent keyboard keys and shortcuts in your documentation using the `{kbd}` role. This is useful for showing keyboard commands and shortcuts in a visually consistent way.
3+
You can represent keyboard keys and shortcuts in your documentation using the `{kbd}` role. This is useful for showing keyboard commands and shortcuts in a visually consistent way. See the full list of [available keys](#available-keys).
44

55
## Basic usage
66

@@ -22,7 +22,7 @@ Press {kbd}`enter` to submit.
2222

2323
## Combining keys
2424

25-
For keyboard shortcuts involving multiple keys, you can combine them within a single `{kbd}` role by separating the key names with a `+`.
25+
For keyboard shortcuts involving multiple keys, you can combine them within a single `{kbd}` role by separating the key names with a `+`. Keys are always visually separated, even when using the combined syntax.
2626

2727
::::{tab-set}
2828

@@ -38,36 +38,30 @@ Use {kbd}`cmd+shift+enter` to execute the command.
3838

3939
::::
4040

41-
Alternatively, you can use multiple `{kbd}` roles to describe a shortcut. This approach is useful when you want to visually separate keys. Use a `+` to represent a combination and a `/` to represent alternative keys.
41+
## Alternative keys
42+
43+
To display alternative keys for a shortcut, use `|` to separate the alternate keys within the same `{kbd}` role. This is useful for showing platform-specific shortcuts, such as `ctrl` on Windows and `cmd` on macOS.
4244

4345
::::{tab-set}
4446

4547
:::{tab-item} Output
46-
{kbd}`ctrl` + {kbd}`c` to copy text, or {kbd}`cmd` + {kbd}`c` on Mac.
48+
Use {kbd}`ctrl|cmd + c` to copy text.
4749
:::
4850

4951
:::{tab-item} Markdown
5052
```markdown
51-
{kbd}`ctrl` + {kbd}`c` to copy text, or {kbd}`cmd` + {kbd}`c` on Mac.
53+
Use {kbd}`ctrl|cmd + c` to copy text.
5254
```
5355
:::
5456

5557
::::
5658

57-
::::{tab-set}
58-
59-
:::{tab-item} Output
60-
{kbd}`ctrl` / {kbd}`cmd` + {kbd}`c` to copy text.
61-
:::
59+
## Reserved characters
6260

61+
The `+` and `|` characters have special meaning for combining keys and specifying alternatives. To render them as literal keys, you must use their keyword equivalents.
6362

64-
:::{tab-item} Markdown
65-
```markdown
66-
{kbd}`ctrl` / {kbd}`cmd` + {kbd}`c` to copy text.
67-
```
68-
:::
69-
70-
::::
63+
- To display the {kbd}`plus` key, use `` `{kbd}`plus` ``.
64+
- To display the {kbd}`pipe` key, use `` `{kbd}`pipe` ``.
7165

7266
## Common shortcuts by platform
7367

@@ -107,40 +101,41 @@ The `{kbd}` role recognizes a set of special keywords for modifier, navigation,
107101

108102
Here is the full list of available keywords:
109103

110-
| Keyword | Rendered Output |
111-
|-------------|------------------|
112-
| `shift` | {kbd}`shift` |
113-
| `ctrl` | {kbd}`ctrl` |
114-
| `alt` | {kbd}`alt` |
115-
| `option` | {kbd}`option` |
116-
| `cmd` | {kbd}`cmd` |
117-
| `win` | {kbd}`win` |
118-
| `up` | {kbd}`up` |
119-
| `down` | {kbd}`down` |
120-
| `left` | {kbd}`left` |
121-
| `right` | {kbd}`right` |
122-
| `space` | {kbd}`space` |
123-
| `tab` | {kbd}`tab` |
124-
| `enter` | {kbd}`enter` |
125-
| `esc` | {kbd}`esc` |
126-
| `backspace` | {kbd}`backspace` |
127-
| `del` | {kbd}`delete` |
128-
| `ins` | {kbd}`insert` |
129-
| `pageup` | {kbd}`pageup` |
130-
| `pagedown` | {kbd}`pagedown` |
131-
| `home` | {kbd}`home` |
132-
| `end` | {kbd}`end` |
133-
| `f1` | {kbd}`f1` |
134-
| `f2` | {kbd}`f2` |
135-
| `f3` | {kbd}`f3` |
136-
| `f4` | {kbd}`f4` |
137-
| `f5` | {kbd}`f5` |
138-
| `f6` | {kbd}`f6` |
139-
| `f7` | {kbd}`f7` |
140-
| `f8` | {kbd}`f8` |
141-
| `f9` | {kbd}`f9` |
142-
| `f10` | {kbd}`f10` |
143-
| `f11` | {kbd}`f11` |
144-
| `f12` | {kbd}`f12` |
145-
| `plus` | {kbd}`plus` |
146-
| `fn` | {kbd}`fn` |
104+
| Syntax | Rendered Output |
105+
|-------------------------|------------------|
106+
| `` {kbd}`shift` `` | {kbd}`shift` |
107+
| `` {kbd}`ctrl` `` | {kbd}`ctrl` |
108+
| `` {kbd}`alt` `` | {kbd}`alt` |
109+
| `` {kbd}`option` `` | {kbd}`option` |
110+
| `` {kbd}`cmd` `` | {kbd}`cmd` |
111+
| `` {kbd}`win` `` | {kbd}`win` |
112+
| `` {kbd}`up` `` | {kbd}`up` |
113+
| `` {kbd}`down` `` | {kbd}`down` |
114+
| `` {kbd}`left` `` | {kbd}`left` |
115+
| `` {kbd}`right` `` | {kbd}`right` |
116+
| `` {kbd}`space` `` | {kbd}`space` |
117+
| `` {kbd}`tab` `` | {kbd}`tab` |
118+
| `` {kbd}`enter` `` | {kbd}`enter` |
119+
| `` {kbd}`esc` `` | {kbd}`esc` |
120+
| `` {kbd}`backspace` `` | {kbd}`backspace` |
121+
| `` {kbd}`del` `` | {kbd}`delete` |
122+
| `` {kbd}`ins` `` | {kbd}`insert` |
123+
| `` {kbd}`pageup` `` | {kbd}`pageup` |
124+
| `` {kbd}`pagedown` `` | {kbd}`pagedown` |
125+
| `` {kbd}`home` `` | {kbd}`home` |
126+
| `` {kbd}`end` `` | {kbd}`end` |
127+
| `` {kbd}`f1` `` | {kbd}`f1` |
128+
| `` {kbd}`f2` `` | {kbd}`f2` |
129+
| `` {kbd}`f3` `` | {kbd}`f3` |
130+
| `` {kbd}`f4` `` | {kbd}`f4` |
131+
| `` {kbd}`f5` `` | {kbd}`f5` |
132+
| `` {kbd}`f6` `` | {kbd}`f6` |
133+
| `` {kbd}`f7` `` | {kbd}`f7` |
134+
| `` {kbd}`f8` `` | {kbd}`f8` |
135+
| `` {kbd}`f9` `` | {kbd}`f9` |
136+
| `` {kbd}`f10` `` | {kbd}`f10` |
137+
| `` {kbd}`f11` `` | {kbd}`f11` |
138+
| `` {kbd}`f12` `` | {kbd}`f12` |
139+
| `` {kbd}`plus` `` | {kbd}`plus` |
140+
| `` {kbd}`fn` `` | {kbd}`fn` |
141+
| `` {kbd}`pipe` `` | {kbd}`pipe` |

‎src/Elastic.Documentation.Site/Assets/markdown/kbd.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
@layer components {
22
.markdown-content {
33
kbd.kbd {
4-
@apply bg-grey-20 text-grey-100 border-grey-50 shadow-grey-50 relative top-[-2px] inline-flex min-w-[18px] cursor-default gap-1.5 rounded-sm border px-1.5 pt-[3px] pb-[2px] text-center align-middle font-mono text-sm leading-none capitalize shadow-[0_2px_0_1px];
4+
@apply relative bg-grey-20 text-grey-100 border-grey-50 shadow-grey-50 top-[-2px] inline-flex items-center min-w-[18px] cursor-default gap-1.5 rounded-sm border px-1.5 pt-[3px] pb-[2px] text-center align-middle font-mono text-sm leading-none capitalize shadow-[0_2px_0_1px];
5+
}
6+
7+
kbd.kbd .kbd-separator {
8+
@apply bg-grey-100 inline-block mx-1 self-stretch;
9+
width: 1px;
10+
/*height: .8em;*/
11+
transform: translateY(-1px) rotate(30deg);
12+
}
13+
14+
kbd.kbd .kbd-space {
15+
@apply w-0;
516
}
617
}
718
}

0 commit comments

Comments
 (0)