Enlighter 插件自定义 CSS：实现 Mac 风格代码高亮界面

为 Enlighter 代码高亮插件定制 macOS 风格样式

Enlighter 是一款强大的代码高亮插件，但其默认主题缺乏 macOS 窗口的视觉风格。通过在主题中添加自定义 CSS，可以快速实现具有圆角、模拟控制按钮和精致滚动条的 Mac 风格界面。

.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 行）： 设置 8px 圆角及底部边距；通过 padding-top 为顶部的模拟按钮预留空间，避免按钮与代码区域重叠，并定义了顶栏背景色。
• 代码区域（18-24 行）： 限制最大高度为 510px，超出部分通过滚动条显示，并确保顶栏背景不随内容滚动。
• 模拟控制按钮（25-44 行）： 利用 ::after 伪元素在左上角绘制三个灰色圆点，并设置 hover 状态下的红黄绿三色切换，模拟 Mac 窗口关闭 / 最小化 / 全屏按钮。
• 行号样式（45-51 行）： 调整了代码行号的背景色与字体颜色，并增加了鼠标悬停时的亮色高亮效果。

注意事项

由于不同主题的 CSS 优先级和结构存在差异，建议在添加代码后，根据实际显示效果微调 padding 或 color 等数值，以达到最佳适配状态。