AI 摘要

本摘要由 AI 生成，仅供参考，内容请以原文为准。

VitePress 文章键盘按键标签效果展示 ​

本站使用自定义 markdown-it 内联标签和 Vue 组件，支持通过 :key{code="..."} 语法在文章中渲染键盘按键元素。按下对应按键时按钮会高亮，点击也会触发事件。

语法说明 ​

使用 :key{...} 语法，大括号内指定按键属性：

md
:key{code="Escape"}
:key{code="A" ctrl shift}
:key{alt icon}
属性类型说明
codeString按键代码（如 Escape、A、ArrowUp）
textString自定义显示文本
iconBoolean显示图标符号（macOS 默认）
ctrlBoolean添加 Ctrl 修饰键
shiftBoolean添加 Shift 修饰键
altBoolean添加 Alt 修饰键
metaBoolean添加 Meta 修饰键
cmdBoolean智能适配（macOS 用 Cmd，Windows 用 Ctrl）
preventBoolean阻止按键默认行为

纯 Code ​

Esc F2 Ctrl A Space Tab Enter

指定修饰符、图标、文本 ​

macOS 自动使用图标符号，Windows 显示文字。使用 icon 属性可强制启用图标模式：

⌃ ⌥ ⇧ 空格 ⇥ ↵

组合键 ​

Ctrl+Shift+A Shift+Alt ⌃⌥⎋

热血组合技 ​

↑ ↑ ↓ ↓ ← → ← → B A

效果特点 ​

  • 按下对应按键时按钮高亮（主题色背景 + 下移效果）
  • 鼠标点击按钮也会触发 press 事件
  • 支持 macOS / Windows 自动适配图标
  • 支持组合键（Ctrl+Shift+A 等）
  • 支持自定义显示文本
  • 使用 <ClientOnly> 包裹，确保 SSR 安全
VitePress 文章键盘按键标签效果展示https://b.2005815.xyz/posts/markdown-it/key-tag
作者Moretti815
发布于今日内
更新于今日内
许可协议 CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际
VitePressMarkdownmarkdown-it
赞赏博主
评论 隐私政策