WordPress高亮代码插件enlighter自定义CSS_word press enlighterjs-程序员宅基地

Enlighter，全名是Enlighter – Customizable Syntax Highlighter。支持各种自定义和各种脚本的专属添加形式，而且也有代码行数和自定义CSS样式，总之功能很强大。最新版4.3.1效果如图。

插件适配CSS

在wordpress主题自定义选项中，找到插入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;
}

下面，我们来解释下以上代码的意思吧。

• 上述代码中的第1-11行，设置了高亮代码的滚动条样式，如果不喜欢可以不用添加这段代码。
• 上述代码中的第12-17行，设置了代码块的圆角、下方的空位大小以及给上方预留了按钮位置。(原来的情况是，按钮直接放在代码区域上，不太美观)。此外，设置了整个代码块的背景颜色。(由于，后面会设置代码区域的颜色，所以这部分颜色相当于上方预留按钮的背景色)
• 上述代码中的第18-24行，设置了代码块的最大高度、超出高度以滚动条方式展现、横向超出范围展现滚动条，以及上方预留按钮不跟随滚动。此外，设置了代码区域的背景颜色。
• 上述代码中的第25-39行，设置了代码块左上角的三个灰色按钮(没啥用，就是好看)。
• 上述代码中的第40-44行，设置了鼠标滑过代码块时，三个灰色按钮变色。
• 上述代码中的第45-48行，设置了代码块左侧行号的背景色及字体颜色。
• 上述代码中的第49-51行，设置了鼠标滑过代码块时，左侧行号的字体颜色。

Enlighter是一款免费，易于使用的WordPress语法高亮工具。它是用PHP构建的，并使用基于Javascript的EnlighterJS库来提供漂亮的代码外观。
使用它可以像选择编辑器样式或在脚本周围添加要突出显示的短代码一样简单，Enlighter负责其余部分。包含一个易于使用的Theme-Customizer来修改内置主题，而不需要任何css knowlegde！
它还支持自动创建选项卡窗格以显示代码组(对多语言示例有用 - 例如html + css + js)

插件主页：https://wordpress.org/plugins/enlighter/

官方网站：https://enlighterjs.org/

来源：WordPress高亮代码插件enlighter自定义CSS