WordPress代码高亮免插件纯代码实现

WordPress代码高亮功能是一个比较常见的功能，很多朋友选择用插件实现这个功能，不过悟空搜还是倾向于纯代码实现代码高亮的功能。

其实在WordPress编辑器内是有插入代码的按钮的，如果你使用的是古腾堡编辑器，只需要点击添加添加区块，选择代码区块即可：

如果你使用的是经典编辑器，点击段落-预格式化也可以输入代码：

如果不喜欢使用预格式化，可以在WordPress经典编辑器添加新的插入代码按钮来实现添加代码，具体教程可以参考下面这篇文章。

接下来就是代码区域美化了，在主题css文件添加下面代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//CSS样式美化可以根据自己的主题风格调整

pre {

    font-size: 13px;

    position: relative;

    background: #141415;

    color: #fff;

    border-left: 5px solid #2c63ff;

}

.single-copy {

    background: #2c63ff;

    padding: 5px 10px;

    font-size: 13px;

    border-bottom-left-radius: 4px;

    cursor: pointer;

    position: absolute;

    top: 0;

    right: 0;

    color: #fff;

}





美化后的代码区域样式就变成下面这样效果了：







一个简易的代码高亮效果就完成了，不过有朋友问我右上角的意见复制效果是怎么实现的，这个就有点复杂了，需要加载一个JS文件，我会在下一篇文章详细说明的，请多多关注悟空搜！




扫码关注wp悟空搜



精选优质免费WordPress主题模板，分享最新WordPress实用建站教程！



记住我们的网址：ztJun.com

		    					    			
			    					    					    				    					    			
 原文链接：https://xiaohost.com/1311.html，转载请注明出处。