emlog非插件实现高亮代码复制

emlog非插件实现高亮代码复制

作者: 冷文

全网最全的网络资源分享网站

手机扫码查看

标签:

emloglwcopy

特别声明:文章多为原创,资源一般为网络转载,如有侵权请联系!

emlog非插件实现高亮代码复制

需求

我们在网页上经常会有这样的需求,就是有时我们需要复制别人的代码,但又不好复制,就像这样
1VSnlF.md.png

所以需求就来了,我们要实现一个如图的功能,点击copy按钮,直接复制内容到剪切板

分析

因为我们网站显示的代码高亮一般都是通过插件生成的,一般代码会放在pre标签中,所以我们只需要在页面初始化的时候在每个pre子元素后面追加一个按钮就行啦,然后加上样式和js代码就OK拉

分析到这里就OK啦,不光emblog,任何网站都可以,你只需要找到响应的位置做更改就行

操作

找到你展示页面的css文件,然后复制如下代码

pre {
    position: relative;
}
.lw-copy {
    display: block;
    content: "copy";
    position: absolute;
    right: 2px;
    top: 2px;
    padding: 2px;
    color: #000 ;
    background-color: #fff;
    border-radius: 4px;
}
.lw-copy:hover {
    /* 这里是鼠标手型的样子,可以不要 */
    cursor: url("../img/fcous.cur"),auto;
    font-size: 15px;
}

在你的展示页引入复制插件

<script src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>

找到一个你展示页引用的js,复制如下代码

$(function() {
$("pre").append("<i class='lw-copy'>copy</i>");


var clipboard = new Clipboard(".lw-copy", {
    text: function(trigger) {
    var copytext = $(trigger).parent().text();
    copytext = copytext.substr(0, copytext.length - 4);
    return copytext.trim();
    }
});
clipboard.on("success", function(e) {
    alert("复制成功");
});

clipboard.on("error", function(e) {
    console.log(e);
});
});

效果

1VSqcF.md.png

分享到:
打赏
未经允许不得转载:

作者: 冷文, 转载或复制请以 超链接形式 并注明出处 冷文博客-冷文学习者
原文地址: 《emlog非插件实现高亮代码复制》 发布于2020-4-3

评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Sitemap