为Enlighter插件打造macOS风格代码块：自定义CSS全攻略

2022-02-15 教程指南

本文详细讲解如何通过自定义CSS，让Enlighter代码高亮插件呈现macOS风格，包括按钮、滚动条、行号等细节调整，并附完整代码与逐段解析。

💡 快速判断Enlighter插件通过自定义CSS可实现MAC风格，代码高亮更美观，适合追求视觉效果的开发者，但需手动调整主题，不适合追求简洁或技术小白。

引言

Enlighter是一款功能强大的代码高亮插件，默认主题虽然实用，但缺乏macOS风格的精致感。通过自定义CSS，我们可以轻松为代码块添加mac风格的三色按钮、圆角设计以及舒适的滚动体验。本文提供一套完整的CSS方案，并逐段解释其作用，帮助你根据自己的主题进行微调。

CSS样式逐段解析

滚动条样式（第1-11行）

这段代码自定义了代码块的滚动条外观，包括宽度、轨道颜色和滑块样式。如果你不喜欢自定义滚动条，可以省略这部分，使用浏览器默认样式。

代码块整体布局（第12-17行）

这里设置了代码块的圆角、底部留白，并为顶部的mac按钮预留了空间。默认情况下，按钮会紧贴代码区域，显得不够美观。通过调整背景色，使预留区域与代码区域形成视觉区分。

代码区域滚动行为（第18-24行）

这部分定义了代码块的最大高度，超出部分以滚动条形式呈现，横向溢出也支持滚动。同时，确保顶部的mac按钮在滚动时保持固定，不随内容移动。代码区域的背景色也在此设置。

模拟mac三色按钮（第25-39行）

通过CSS伪元素，在代码块左上角生成红、黄、绿三个圆形按钮。它们仅用于装饰，不具实际功能，但能显著提升mac风格观感。

按钮悬停效果（第40-44行）

当鼠标悬停在代码块上时，三个按钮的颜色会发生变化，模拟macOS窗口按钮的交互反馈，增强动态体验。

行号样式（第45-48行）

设置代码块左侧行号的背景色和字体颜色，使其与整体风格协调。

行号悬停效果（第49-51行）

鼠标滑过代码块时，行号的字体颜色会改变，提升视觉层次感。

完整CSS代码示例

将以下代码添加到你的主题自定义CSS中，即可快速实现mac风格。请根据实际主题调整选择器，例如将.enlighter替换为你的代码块类名。

/* 滚动条 */
.enlighter {
  scrollbar-width: thin;
  scrollbar-color: #888 #f0f0f0;
}
.enlighter::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.enlighter::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.enlighter::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* 代码块整体 */
.enlighter {
  border-radius: 8px;
  padding-bottom: 10px;
  padding-top: 30px; /* 预留按钮位置 */
  background: #f5f5f5;
}

/* 代码区域 */
.enlighter-code {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: auto;
  background: #fff;
}

/* mac按钮 */
.enlighter-toolbar {
  position: absolute;
  top: 8px;
  left: 12px;
  display: flex;
  gap: 6px;
}
.enlighter-toolbar span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.enlighter-toolbar span:nth-child(1) { background: #ff5f57; }
.enlighter-toolbar span:nth-child(2) { background: #febc2e; }
.enlighter-toolbar span:nth-child(3) { background: #28c840; }

/* 悬停变色 */
.enlighter:hover .enlighter-toolbar span:nth-child(1) { background: #e0443e; }
.enlighter:hover .enlighter-toolbar span:nth-child(2) { background: #de9f2d; }
.enlighter:hover .enlighter-toolbar span:nth-child(3) { background: #1f9e33; }

/* 行号 */
.enlighter-line-numbers {
  background: #f0f0f0;
  color: #999;
}
.enlighter:hover .enlighter-line-numbers {
  color: #333;
}

注意事项

不同主题的CSS类名可能不同，请根据实际HTML结构调整选择器。
若你的主题已有工具栏，可能需要覆盖默认样式，确保.enlighter-toolbar的定位正确。
按钮的悬停颜色可自定义，以匹配你的主题配色。
代码块的最大高度可根据需要调整，或移除max-height使其自动扩展。