插件页的介绍写得很明白,就是提供一个在工具栏上快速开关代码片段的按钮。有一些主题的工具栏按钮的功能就是启用一个代码片段,如 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。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于