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

释放双眼,带上耳机,听听看~!

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

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

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

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

第一步:加载clipboard文件


//可以自行下载本地上传自己服务器加载

文件加在主题的header.php的上即可。

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

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

//复制代码
for (var i = 0; i 复制');
	$('.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("复制失败,请联系站长QQ:1098816988");
});

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

文章来源于互联网:wordpress文章代码高亮添加一键复制代码功能

人已赞赏
技术杂烩杂七杂八网站建设

WordPress搜索结果排除指定页面/文章/自定义分类

2020-11-4 17:19:49

Linux学习笔记技术杂烩杂七杂八

linux命令行预览markdown文件

2020-11-6 19:05:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索