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

2020-03-22 0 350 WordPress教程 百度已收录
首页 WordPress教程 WordPress代码高亮免插件纯代码实现

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

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

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

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

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

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

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

//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;
}

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

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

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

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

扫码关注wp主题君

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

记住我们的网址:ztJun.com

标题:WordPress代码高亮免插件纯代码实现

分类:WordPress教程

链接:https://www.ztjun.com/1311.html

版权:主题君(ztJun.com)所分享发布内容,部分为网络转载,如有侵权请立即联系我们,我们第一时间删除并致歉!

相关文章

评论 暂无评论
?>