代码块转为html,博客园为代码块添加复制功能

下载文件

实现该功能要用到两个js文件,分别是

可以直接引用,但最好还是下载下来放到自己的文件里

添加css

网上实现此功能的文章很多都互相转载,都是下面这一段css代码:

.cnblogs-markdown pre {

position: relative;

}

.cnblogs-markdown pre > span {

position: absolute;

top: 0;

right: 0;

border-radius: 2px;

padding: 0 10px;

font-size: 12px;

background: rgba(0, 0, 0, 0.4);

color: #fff;

cursor: pointer;

display:none;

}

.cnblogs-markdown pre:hover > span {

display:block;

}

.cnblogs-markdown pre > .copyed {

background: #67c23a;

}

这种样式适合于代码块底色为亮色的情形,而且复制按钮是贴在代码块的边上的,我觉得在暗色模式下会比较不舒服,所以我修改了一些,把按钮改成了白色,增加了复制按钮的边距,并且增加了鼠标悬停的效果,在暗色模式下会比较舒服,这是我更改以后的css代码:

.cnblogs-markdown pre {

position: relative;

}

.cnblogs-markdown pre > span {

position: absolute;

top: 0;

right: 0;

border-radius: 3px;

padding:0 10px;

font-size: 12px;

background: #fff;

color: #000;

cursor: pointer;

display:none;

margin:8px 10px;

transition: background .5s;

-moz-transition: background .5s;

-webkit-transition: background .5s;

-o-transition: background .5s;

}

.cnblogs-markdown pre > span:hover {

background: #ddd

}

.cnblogs-markdown pre:hover > span {

display:block;

}

将上述代码复制到博客园后台的“页面定制CSS代码”中即可

引用js

接着在“页脚HTML代码”中添加对两个js文件的引用(需要JS权限)

我更改了cp.js里面的代码,实现点击复制后显示“复制成功”1秒后自动跳回成“复制”,而删除了原来依靠鼠标移开来跳回,防止用户在点击复制后立即移开鼠标造成“复制成功”一闪而过的情况发生,下面是更改后的cp.js

$(function() {

if ($("#cnblogs_post_body").hasClass("cnblogs-markdown")){

if ($("#post-date")[0]) {

var pres = $("pre");

if (pres.length) {

pres.each(function() {

var t = $(this)

.children("code")

.text();

var btn = $('复制').attr(

"data-clipboard-text",

t

);

$(this).prepend(btn);

var c = new ClipboardJS(btn[0]);

c.on("success", function() {

btn.addClass("copyed").text("复制成功");

setTimeout(function(){

btn.text("复制").removeClass("copyed");

},1000);

});

c.on("error", function() {

btn.text("复制失败");

});

});

}

}

}

});

当然也可以直接引用我改好的js文件:

参考资料

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值