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

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

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

在编辑器中插入代码

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

如果你使用的是经典编辑器，点击“段落”按钮，选择“预格式化”也可以输入代码。

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

美化代码区域样式

接下来就是代码区域美化了。在主题的CSS文件（通常是style.css）中添加下面代码：

/* CSS样式美化可以根据自己的主题风格调整 */
pre {
    font-size: 13px;
    position: relative;
    background: #141415;
    color: #fff;
    border-left: 5px solid #2c63ff;
    padding: 1em;
    overflow: auto;
    border-radius: 4px;
}
.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;
}

说明： 上述CSS为<pre>标签添加了基础样式，包括背景色、边框和代码字体。添加了padding和overflow: auto是为了让代码块有内边距并在内容过长时显示滚动条，这是更标准的做法。

美化后的代码区域样式效果如下（示意图）：

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