代码块转为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文件：

参考资料