為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 等數值，以達到最佳適配狀態。
正文完
