quickSnippets 玩法分享

插件页的介绍写得很明白，就是提供一个在工具栏上快速开关代码片段的按钮。有一些主题的工具栏按钮的功能就是启用一个代码片段，如 savor 的悬浮顶栏和标记转挖空。如果普通用户想使用这些功能就只能去迁移 js。

但是 quickSnippets 这款插件提供了另外一种解决方式，老版工具栏按钮可能会遇到不完全环境的 js 代码失效的问题（悬浮窗和拖拽内容块中），新版已经解决不过对于普通用户来说比较难学习，而 quickSnippets 操作简单也解决了这个问题（本身代码片段的启用就不会有这个问题）。

下面一起来实战一下吧！

首先向代码片段中添加这段代码，命名为标记转挖空。（来自 Savor）

.b3-typography [data-type~="mark"], .protyle-wysiwyg [data-type~="mark"]{
color: transparent !important;
padding: 0px 5px 0px 5px;
background-color: transparent !important;
border-bottom: 0.1em solid var(--b3-theme-on-background)!important;
transition: all 300ms;
}
.b3-typography [data-type~="mark"]:hover, .protyle-wysiwyg [data-type~="mark"]:hover{
color: var(--b3-theme-on-background)!important;
transition: all 300ms;
padding: 0px 5px 0px 5px;
}

然后右下角确定。

然后你就能在工具栏上的 quickSnippets 插件菜单中看到这段代码了。

然后你打开开关启用它。你的文章中的标记就转换为挖空效果，鼠标悬浮在上方会显示原有的文字，便于复习。

此外还可以有其他玩法，如颜色滤镜。（来自 HbuiderX-Light）

html {
filter: grayscale(100%);
}

添加上面这段代码，再命名为灰阶，如法炮制，你就获得了一个把界面变成灰色的工具栏按钮。

quickSnippets 的下载量出乎意料的少，希望能有更多用户来尝试。

感谢 quickSnippets 的作者椽承设计，感谢 Savor 和 HbuiderX-Light 的作者以及本演示主题 chuizi 的作者 UserZYF。