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

下面,告诉大家我是如何实现的吧。后台,搜索安装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主题,其他主题未作测试。

具体高亮代码的样子,就像上面的CSS代码那个样子。
当然,如果你喜欢暗黑风格的高亮代码,可以参考我之前写的文章:《WordPress Justnews主题魔改教程》以及《WordPress如何实现高亮代码功能》。
以上两张图,分别为鼠标滑过代码与正常代码的样式情况。
原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-enlighter-setup.html
评论列表(3条)
这个高亮插件不错
@30 ℃:高亮插件都差不多,都需要自己改点CSS
@古哥:明白