WordPress代码高亮插件：Pure-Highlightj

今天推荐一款还算比较好用的wordpress的代码高亮插件，这种插件一般都是程序员在写技术类的文章时会用到，这个插件设计的比较方便使用所以推荐给大家。

先上项目地址：https://github.com/icodechef/Pure-Highlightjs

安装

安装方法比较简单，直接上传到wordpress的插件目录中，然后启用即可，启用完毕，在后台编辑文章时可以看到

点开后是个弹框，可以将代码写入

点击确定即可保存到编辑器中。

调整前台显示样式

在wordpress后台 设置-》Pure Highlightjs 设置 中选择xxzhuti 的模版，那么前台展示的将是mac主题样式。

前台展示样式如下：

不过目前xx-blog主题用的不是这个插件，回头我会优化一下这个插件，用在 xx-blog主题中，欢迎大家关注。

WordPress文章代码高亮添加一键复制代码功能

这篇文章wp自学笔记给大家讲解下怎么给WordPress代码高亮添加一键复制，如果看了上一篇文章的朋友应该已经可以实现文章代码高亮效果，如果还没看那篇文章可以点击下面链接去看一看。

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

那么这篇文章就不再讲代码高亮的效果了，直接开始今天的一键复制WordPress教程。

实现一键复制主要是需要加载一个JS：clipboard.min.js，然后再自己写一些JS实现点击复制的功能，具体步骤如下：

第一步：加载clipboard文件

<script type=\\\'text/javascript\\\' src=\\\'https://www.wpzxbj.com/wp-content/themes/ztjun/static/js/clipboard.min.js\\\'></script>//可以自行下载本地上传自己服务器加载

文件加在主题的header.php的</head>上即可。

第二步：实现一键点击复制

首先我们在主题的JS文件中添加下面JS代码：

//复制代码for (var i = 0; i < $(\\\'.single-content pre\\\').length; i++) {$(\\\'.pre\\\').eq(i).append(\\\'<span  data-clipboard-target=\\\"#copy\\\'+ i +\\\'\\\" data-uk-tooltip title=\\\"点击复制本段代码\\\">复制</span>\\\');$(\\\'.pre code\\\').eq(i).attr(\\\'id\\\',\\\'copy\\\'+ i);}var clipboard = new ClipboardJS(\\\'.copy\\\');clipboard.on(\\\'success\\\', function(e) {console.info(e.text);e.clearSelection();alert(\\\'复制成功！\\\')});clipboard.on(\\\'error\\\', function(e) {console.error(\\\'Action:\\\', e.action);console.error(\\\'Trigger:\\\', e.trigger);alert(\\\"复制失败，请联系站长\\\");});

上面步骤完成后，强制刷新页面即可实现代码一键点击复制的功能，如果有问题可以加入我们的WordPress交流群咨询。

扫码关注wpwp自学笔记

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

记住我们的网址：ztJun.com