朱纯树博客
VPS测评推荐网站
cloudacead cloudacead

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文章代码高亮添加一键复制代码功能

赞(0) 打赏
未经允许不得转载:VPS测评推荐网站 - 朱纯树博客 » WordPress文章代码高亮添加一键复制代码功能

评论 28

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #30

    This paragraph will assist the internet viewers for building up
    new blog or even a blog from start to end.

  2. #29

    What a stuff of un-ambiguity and preserveness of precious know-how regarding unexpected feelings.

  3. #28

    What’s up everyone, it’s my first go to see at this web page, and piece of writing
    is truly fruitful for me, keep up posting such articles or
    reviews.

    Feel free to surf to my webpage :: special

  4. #27

    Whats up very cool site!! Man .. Beautiful ..
    Wonderful .. I will bookmark your blog and take the
    feeds additionally? I’m glad to seek out numerous useful info here
    within the submit, we need work out extra strategies on this regard, thank you for sharing.

    . . . . .

  5. #26

    What’s up to every , because I am truly eager of reading this web site’s post to be updated daily.
    It contains pleasant information.

    pulpsushi.com1周前 (08-08)回复
  6. #25

    Hi to all, the contents present at this web site
    are in fact awesome for people experience, well,
    keep up the nice work fellows.

    tinyurl.com2周前 (08-03)回复
  7. #24

    It’s truly a nice and helpful piece of information. I am glad that you shared this useful info with us.
    Please stay us informed like this. Thanks for sharing.

  8. #23

    We stumbled over here by a different page and thought I might check
    things out. I like what I see so now i am following you.
    Look forward to going over your web page yet again.

  9. #22

    Hi there to every one, the contents present at this web page are truly amazing for people experience, well, keep up the good work fellows.

    tinyurl.com3周前 (07-28)回复
  10. #21

    Nice blog! Is your theme custom made or did you download
    it from somewhere? A theme like yours with a few simple tweeks would really make my blog jump out.
    Please let me know where you got your design. Kudos

    t.co4周前 (07-22)回复
  11. #20

    I am really delighted to read this weblog posts which carries lots of
    valuable facts, thanks for providing these kinds of data.

    http://tinyurl.com/1个月前 (07-07)回复
  12. #19

    Appreciate this post. Will try it out.

    http://bit.ly/3NQfjYu2个月前 (06-08)回复
  13. #18

    Great article! We are linking to this particularly great content on our site.
    Keep up the good writing.

    http://tinyurl.com2个月前 (06-06)回复