打造MAC风格的代码高亮：Enlighter插件CSS自定义指南

Enlighter插件MAC风格自定义CSS教程

Enlighter插件是一款功能强大的代码高亮工具，默认风格并非MAC风格。但通过简单的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行：设置鼠标悬停时行号的字体颜色。