Enlighter代码高亮插件美化代码

代码介绍如果你也和我一样，使用的代码高亮插件是Enlighter – Customizable Syntax Highlighter那么本站分享的这个美化代码，或许你会喜欢

代码修改方法

1、首先你需要安装了Enlighter插件

2、在插件的设置中，依次选择Appearance – Theme – Atomic,这么做是为了将站内所有的高亮包裹主题都修改为Atomic。如果你不喜欢这个主题，基本不用往下看了，或者你可以自己再改。

3、在你的style.css文件中，保存以下代码

/**************************************** 代码高亮插件样式 ********************************************/
    /*未登录用户样式，非B2主题可删除此样式*/
    .content-user-lv-login{
        display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    }
    
    /*强制按钮z-index，非B2主题可删除此样式*/
    .enlighter-tooltip{
        z-index: 1 !important;
    }
    .enlighter-toolbar{
        z-index: 1 !important;
    }
    /*设置整个区域高度-显示滚动条*/
    .enlighter-code {
        max-height: 450px;
        overflow: auto;
        /* 启用滚动条，当内容溢出容器时显示滚动条 */
    }

    .enlighter-code::-webkit-scrollbar {
        width: 8px;
        /* 设置垂直滚动条的宽度为 8px */
        height: 6px;
        /* 设置水平滚动条的高度为 6px */
    }

    /* 滚动条滑块的样式 */
    .enlighter-code::-webkit-scrollbar-thumb {
        background-color: #272b33;
        /* 设置滚动条滑块的颜色为深灰色 */
        border-radius: 10px;
    }

    /* 当鼠标悬停在 .enlighter-code 上时，改变滚动条滑块的颜色 */
    .enlighter-code:hover::-webkit-scrollbar-thumb {
        background-color: rgb(110, 107, 107);
        /* 设置滚动条滑块的颜色为不同的颜色 */
    }

    /* 滚动条轨道的样式 */
    .enlighter-code::-webkit-scrollbar-track-piece {
        background-color: #272b33;
        /* 设置滚动条轨道背景为深灰色 */
    }

    /* Enlighter 默认样式 */
    .enlighter-default {
        border-radius: 8px;
        /* 给整个代码块容器设置圆角，半径为 8px */
        padding-top: 45px !important;
        /* 给代码块容器的上边距设置 40px，确保按钮与代码块之间有足够的间距 */
        padding-bottom: 15px !important;
        background: #272b33;
        /* 设置代码块的背景色为深灰色 */
    }

    /* 在 Enlighter 容器后面添加一个小圆点，圆点在默认状态下是灰色的 */
    .enlighter-default::after {
        content: " ";
        /* 用空格作为内容，生成伪元素 */
        position: absolute;
        /* 绝对定位，使其能够自由定位在容器内 */
        -webkit-border-radius: 50%;
        /* 使用 Webkit 引擎设置圆形的圆角 */
        border-radius: 50%;
        /* 设置为圆形 */
        background: #c7c7c7;
        /* 设置圆点的背景颜色为灰色 */
        width: 12px;
        /* 设置圆点的宽度为 12px */
        height: 12px;
        /* 设置圆点的高度为 12px */
        top: 0;
        /* 使圆点位于容器的顶部 */
        left: 15px;
        /* 设置圆点距离左侧 15px */
        margin-top: 11px;
        /* 设置圆点的上边距为 11px，使其垂直居中于容器 */
        -webkit-box-shadow: 20px 0 #c7c7c7, 40px 0 #c7c7c7;
        /* 为圆点添加阴影效果 */
        box-shadow: 20px 0 #c7c7c7, 40px 0 #c7c7c7;
        /* 为圆点添加阴影效果 */
        transition-duration: .3s;
        /* 设置圆点变化的动画时间为 0.3秒 */
    }

    /* 当鼠标悬停在 Enlighter 容器时，改变圆点的样式 */
    .enlighter-default:hover::after {
        background: #fc625d;
        /* 改变圆点的背景色为红色 */
        -webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        /* 改变圆点阴影的颜色 */
        box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
        /* 改变圆点阴影的颜色 */
    }

    /* Enlighter 容器在 hover 状态时，代码行号的样式 */
    .enlighter-default.enlighter-hover div.enlighter>div:hover:before {
        color: #fff;
    }

插件复制粘贴按钮的翻译方法

1、在插件中搜索文件enlighterjs.min.js，可以搜索到有两个，这两个文件都需要修改。

2、自行F12查看源按钮hover时的英文提示文字，复制后到enlighterjs.min.js文件中搜索并修改。

为什么我只有两个按钮，你有四个

在插件的设置中，依次选择Appearance – Toolbar ，在选项中关闭你不用的功能即可。