WordPress高亮代码插件Enlighter教程

4.3
(3)

熟悉我网站的老访客,都知道网站的高亮代码用的是Enlighter插件,并且添加了一些CSS代码,使得完美兼容justnews。今天,无聊换了种高亮风格,换成了浅色风格。当然,依旧是使用的Enlighter插件来实现。不过,之前我用的是Monokai高亮样式,现在换成了Classic高亮样式。

Wordpress高亮代码插件Enlighter教程

下面,告诉大家我是如何实现的吧。后台,搜索安装Enlighter插件,并设置如下几项:

  • Appearance项目的Theme选择Classic
  • 显示行号
  • 显示鼠标滑过特效
  • 显示工具栏

详情如下图所示:

到此,初步的设置就完成了。接下来,就是我写的自定义css了:

.enlighter>div {
    display: block!important;
}
.enlighter-t-classic div.enlighter>div {
    padding: 0!important;
}
.enlighter-default {
    border-top-left-radius: 10px;
    border-bottom-right-radius: 20px;
    padding-top: 34px!important;
    margin-bottom: 20px!important;
    background: #f1f1f1!important;
}
.enlighter-default .enlighter {
    max-height: 510px;
    overflow: auto;
    white-space: nowrap;
    display: block;
    background: #f1f1f1;
}
.enlighter-default::after {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    width: 12px;
    height: 12px;
    top: 0;
    left: 15px;
    margin-top: 11px;
    -webkit-box-shadow: 20px 0 #fff, 40px 0 #fff;
    box-shadow: 20px 0 #fff, 40px 0 #fff;
    transition-duration: .3s;
}
.enlighter-default:hover::after {
    background: #f92900;
    -webkit-box-shadow: 20px 0 #fbc606, 40px 0 #448ef6;
    box-shadow: 20px 0 #fbc606, 40px 0 #448ef6;
}
.enlighter-t-classic.enlighter-linenumbers div.enlighter>div::before {
    padding: 1px 5px 1px 0!important;
    width: 40px!important;
    min-width: 40px!important;
}
.enlighter-default.enlighter-hover div.enlighter>div:hover:before {
    color: blue;
}

以上CSS放置于主题自定义选项,找到插入CSS的地方。以上代码只适用于Justnews主题,其他主题未作测试。

Wordpress高亮代码插件Enlighter教程

具体高亮代码的样子,就像上面的CSS代码那个样子。

当然,如果你喜欢暗黑风格的高亮代码,可以参考我之前写的文章:《WordPress Justnews主题魔改教程》以及《WordPress如何实现高亮代码功能》。

以上两张图,分别为鼠标滑过代码与正常代码的样式情况。

共计3人评分,平均4.3

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-enlighter-setup.html

发表评论

登录后才能评论

评论列表(3条)

    本站APP
    本站APP
    分享本页
    返回顶部