在网页上编写键盘快捷键时，我们经常使用 HTML 中的<code>标签，或者等价地，Markdown 中的一对反引号。因此，这些键被设置为代码样式。我一直在考虑将它们设置为<kbd>样式，这在语义上更合适，并且<kbd>可以具有与<code>不同的视觉样式。
昨天我写了一小段JavaScript 代码将<code>Key</code>转换为 HTML 页面上的<kbd>Key</kbd> ，还写了几行CSS 代码将<kbd>设置为按钮。您可以导入 JS 和 CSS：
<script src="https://cdn.jsdelivr.net/npm/@xiee/utils/js/key-buttons.min.js" defer></script> <link href="https://cdn.jsdelivr.net/npm/@xiee/utils/css/key-buttons.min.css" rel="stylesheet"></link>
演示
下面是一些例子：
Esc Tab Enter Space Delete Home End PrtScr PrintScreen PageUp PageDown Up Down Left Right
Ctrl Control Shift Alt Cmd Command fn
Ctrl / Cmd + C
Ctrl / Cmd + Alt + I
Shift + Enter
Cmd + Shift + 9
fn + F
Alt + Click
它是如何工作的？
在幕后，JS 代码首先查找不是<pre>子级的<code>标签。对于每个标签，它使用试探法来确定它看起来像一个键还是键盘快捷键。例如， <code>Esc</code>和<code>PageDown</code>等单个键被识别并转换为<kbd>标签；对于键盘快捷键，它们必须以Ctrl / Cmd / Shift / Alt / fn键之一开头，后跟 / 或 +。键必须由 / 或 + 分隔，分隔符的每一侧各有一个空格，例如， Ctrl + Key将被识别，但F12 + C 、 Ctrl - V和Ctrl+Key将不会被识别。如果检测到键盘快捷键，则将每个键放入<kbd>标记中，例如， <code>Ctrl + Key</code>转换为<kbd>Ctrl</kbd> + <kbd>Key</kbd> .
箭头键和 Enter 键是特殊情况：您将键名写在<code>中，例如，
<code>Enter</code> <code>Up</code> <!-- or in Markdown --> `Enter` `Up`
它们将被转换为箭头（带有工具提示，以防箭头混淆）：
<kbd title="Enter">↵</kbd> <kbd title="Up Arrow">↑</kbd>
目前，并非所有键都受支持。我写的脚本主要是为了自己使用，并且只包含了我经常使用的键。如果您需要支持其他密钥，请随时在下面的评论中告诉我或向 Github 提交问题。但是，请注意，当不支持某个键时，您始终可以使用原始 HTML 标记<kbd> ，例如， <kbd>F</kbd>将呈现为 F。Markdown 通常支持原始 HTML，因此<kbd>是一对反引号（例如， `F` ）不起作用时的解决方法。以下是一些写在<kbd>标签中的键：
abcdefghijklmnopqrstu vwxyz ABCDEFGHIJKLMNOPQRSTU VWXYZ 0 1 2 3 4 5 6 7 8 9
CSS 样式
<kbd>标签的样式为带有圆角和框阴影的按钮（灵感来自keyboard-css和这篇文章）。当您将鼠标移到它上面时，它会“下沉”一点。当然，您可以添加更多 CSS 规则或覆盖我的规则来更改样式。
我认为从<code>到<kbd>的转变将使键盘快捷键脱颖而出，以便读者可以更清楚地看到它们。