WordPress 代码高亮带一键复制代码的插件

WordPress 翟a 2个月前 (01-21) 132次浏览 0个评论

在网上经常看到这样的博文,在文章内容给出代码或下载地址时,背景颜色是深色的,一般以黑色居多,然后代码行字体或纯白色或有具有一定的颜色变化。在右上角,还有一键复制按钮,点一键复制,就把所有代码复制到了Windows的剪切板上。整体样式如下图:

代码高亮插件

像这些代码高亮及一键复制,可以通过js与css组合设计来完成,但对于没有前端开发经验的小伙伴来说,是比较难的一件事。我在网上搜索了许久,终于找到一款比较好的Wordpress代码高亮,一键复制插件,插件名叫”Pure-Highlightjs”,该插件最后更新日期是2016年,时间有点久了,它还有二开版本,叫“Pure-Highlightjs for Mac Style”,二开版本,调整了css样式,整体范与苹果系统特效有点类似。

Pure-Highlightjs下载地址

https://github.com/icodechef/Pure-Highlightjs

Pure-Highlightjs-for-Mac下载地址

https://github.com/hylsay/Pure-Highlightjs-for-Mac
有些打不开Github网址的,本文打包好了也提供了下载地址

安装插件

从github上或者本站下载插件,这里我用for Mac版本的。下载到本地电脑上,它是一个zip包。

然后去WordPress后台插件里面安装上传插件
点“立即安装”,安装完,就点“启用”插件,启用插件后,还需要设置下插件,选择你喜欢的“代码高亮”风格,然后点“保存更改”。

插件的使用

进入Wordpress后台,点“文章”,“写文章”,在需要代码高亮的地方,找到“快捷编辑栏“上的”<>“图标,在弹出的窗口中,输入代码。

输入http://ouyuu.com,然后点”确定“。多种语言可选择,一般默认

ouyuu.com

最后,用浏览器,访问这个页面,就是你看到的”代码高亮“效果及右上角的”复制“效果。

资源下载

下载网址
本站部分内容素材来源网络,不代表本站观点,如有侵权,可联系我方删除。链接:https://ouyuu.com/115.html
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址