【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),可以自行定义样式
+
作为按键之间的连接符号会不会混淆呢?完全不会,因为没有+
这个按键,只有一个等号键(不考虑小键盘区)