在wordpress主题自定义选项中,找到插入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: #FFFAFA; } .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; }
- 上述代码中的第1-11行,设置了高亮代码的滚动条样式,如果不喜欢可以不用添加这段代码。
- 上述代码中的第12-17行,设置了代码块的圆角、下方的空位大小以及给上方预留了按钮位置。(原来的情况是,按钮直接放在代码区域上,不太美观)。此外,设置了整个代码块的背景颜色。(由于,后面会设置代码区域的颜色,所以这部分颜色相当于上方预留按钮的背景色)
- 上述代码中的第18-24行,设置了代码块的最大高度、超出高度以滚动条方式展现、横向超出范围展现滚动条,以及上方预留按钮不跟随滚动。此外,设置了代码区域的背景颜色。
- 上述代码中的第25-39行,设置了代码块左上角的三个灰色按钮。
- 上述代码中的第40-44行,设置了鼠标滑过代码块时,三个灰色按钮变色。
- 上述代码中的第45-48行,设置了代码块左侧行号的背景色及字体颜色。
- 上述代码中的第49-51行,设置了鼠标滑过代码块时,左侧行号的字体颜色。
0