Enlighter插件是一款代码高亮插件(效果如下图代码处),Enlighter插件主题默认的是没有mac风格的,可通过修改自定义css来实现,只需在主题加入自定义css即可用,具体位置不同主题不同,你可以通过微调来适配的你主题
.enlighter::-webkit-scrollbar { width: 8px; height: 6px; } .enlighter::-webkit-scrollbar-thumb { background-color: #1E90FF; background-image:-webkit-linear-gradient(45deg, rgba(50,205,50) 25%, transparent 25%, transparent 50%, rgba( 50,205,50) 50%, rgba( 50,205,50) 75%, transparent 75%, transparent); } .enlighter::-webkit-scrollbar-track-piece { background: #444; } .enlighter-default { border-radius: 8px; padding-top: 34px!important; margin-bottom: 20px!important; background: #444; } .enlighter-default .enlighter { max-height: 510px; overflow: auto; white-space: nowrap; display: block; background: #444; } .enlighter-default::after { content: " "; position: absolute; -webkit-border-radius: 50%; border-radius: 50%; background: #c7c7c7; width: 12px; height: 12px; top: 0; left: 15px; margin-top: 11px; -webkit-box-shadow: 20px 0 #c7c7c7, 40px 0 #c7c7c7; box-shadow: 20px 0 #c7c7c7, 40px 0 #c7c7c7; transition-duration: .3s; } .enlighter-default:hover::after { background: #fc625d; -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; } .enlighter-t-monokai.enlighter-linenumbers div.enlighter>div::before { color: #ccc; background: #555; } .enlighter-default.enlighter-hover div.enlighter>div:hover:before { color: #fff; }
css样式解说
上述代码中的第1-11行,设置了高亮代码的滚动条样式,如果不喜欢可以不用添加这段代码。
上述代码中的第12-17行,设置了代码块的圆角、下方的空位大小以及给上方预留了按钮位置。(原来的情况是,按钮直接放在代码区域上,不太美观)。此外,设置了整个代码块的背景颜色。(由于,后面会设置代码区域的颜色,所以这部分颜色相当于上方预留按钮的背景色)
上述代码中的第18-24行,设置了代码块的最大高度、超出高度以滚动条方式展现、横向超出范围展现滚动条,以及上方预留按钮不跟随滚动。此外,设置了代码区域的背景颜色。
上述代码中的第25-39行,设置了代码块左上角的三个灰色按钮(没啥用,就是好看)。
上述代码中的第40-44行,设置了鼠标滑过代码块时,三个灰色按钮变色。
上述代码中的第45-48行,设置了代码块左侧行号的背景色及字体颜色。
上述代码中的第49-51行,设置了鼠标滑过代码块时,左侧行号的字体颜色。
本文链接:https://www.ahhhhfs.com/13529/
- 转载请保留原文链接谢谢!
- 本站所有资源文章出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。
- 本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户擦亮眼睛自行鉴别,做一个有主见和判断力的用户。
- 本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
- 联系方式(#替换成@):feedback#abskoop.com
评论(0)