当前位置:首页WP教程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;}

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

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

扫码关注wp主题君

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

记住我们的网址:ztJun.com

温馨提示:

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

文章链接:https://www.jitheme.com/2672.html

更新时间:2024年03月28日

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@jitheme.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读极(子)主题网络服务协议

给TA打赏
共{{data.count}}人
人已打赏
WP教程

WordPress两种方法实现上传媒体图片文件自动重命名

2023-3-8 22:15:50

WP教程

WordPress主题开发常用模板名称和头部函数大全

2023-3-8 22:15:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索
  • 旅途点赞了文章把帮助改成文库?超级牛B!
  • 遛遛开通了月卡会员感谢支持!
  • Cik签到奖励15点积分,继续坚持!
  • 残忆签到奖励5点积分,继续坚持!
  • 老胡对文章测试子主题灯箱幻灯片效果发布评论!
  • 沐颜小栈-MUOOY.CN对文章测试子主题灯箱幻灯片效果发布评论!
  • 小涛开通了年卡会员感谢支持!