【Templater】快速 kbd 标签

kbd 标签是 HTML 中用来标记按键名称的标签，例如这样：Shift + Ctrl + T 。

我使用 Templater 插件来实现快速将选中（输入）的按键添加 kbd 标签。

模板如下：

<%*
  /**
   * 快速 kbd 标签
   * @author: 稻米鼠
   * @description: 快速给选中快捷键添加 kbd 标签
   * @created: 2022-10-29 16:49:49
   * @updated: 2024-05-06
   * @version: 0.0.1
   */
  let content = tp.file.selection()
  if(!(content && content.length)) content = await tp.system.prompt("请输入快捷键")
  if(!(content && content.length)) return
  const keyNames = {
      "-": "minus",
      "=": "equal",
      "`": "backtick",
      "[": "leftSquareBracket",
      "]": "rightSquareBracket",
      "\\": "backslash",
      ";": "semicolon",
      "'": "singleQuotationMark",
      ",": "comma",
      ".": "period",
      "/": "forwardSlash",
      "↑": "up",
      "↓": "down",
      "←": "left",
      "→": "right",
  }
  tR += content.replace(/([a-z0-9\[\];',.\/\\`\-=↑↓←→]+)/gi, (m, s)=>{
    const className = 'key-'+(/^[a-z0-9]+$/i.test(s) ? s.toLowerCase() : keyNames[s])
    return `<kbd class=${className}>${s}</kbd>`
  })
%>

相关样式：

kbd {
  display: inline-block;
  background-color: #333338;
  color: #E3E3EC;
  border: 1px solid #E3E3EC;
  border-radius: 3px;
  padding: 0 .5rem;
  font-weight: bold;
  box-shadow: 0 4px 0 0 #E3E3EC;
}

细节说明：

• 可以选中整个组合键部分，一次转换
• 加号前后有无空格均可
• 为每个按键添加了对应的类（class），可以自行定义样式
• + 作为按键之间的连接符号会不会混淆呢？完全不会，因为没有 + 这个按键，只有一个等号键（不考虑小键盘区）