代码块转为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
    评论
### 回答1: HTML5电脑游戏代码博客园是一个专门分享和讨论HTML5电脑游戏代码的博客平台。在这个博客园中,我们可以找到各种不同类型的HTML5电脑游戏代码,并与其他开发者进行交流和分享经验。 HTML5是一种用于构建网页和应用程序的技术标准,它包括HTML、CSS和JavaScript等语言。通过HTML5,我们可以创建各种不同类型的游戏,包括拼图游戏、射击游戏、角色扮演游戏等。 在博客园中,我们可以找到一些优秀的HTML5电脑游戏代码示例,这些示例提供了游戏的源代码和演示链接,让我们可以直接在浏览器中体验这些游戏。此外,博客园中还有一些文章和教程,介绍了如何使用HTML5技术开发游戏,包括游戏的基本原理和开发工具的使用等。 通过参与博客园中的讨论,我们可以与其他开发者交流心得和问题,互相学习和进步。这个平台不仅仅是一个代码分享的地方,更是一个互动和共同成长的社区。无论是初学者还是有经验的开发者,都可以在这里找到学习和提升的机会。 总之,HTML5电脑游戏代码博客园是一个提供优秀HTML5游戏代码和交流分享的平台,通过参与其中,我们可以学习和分享HTML5游戏开发的经验,提升自己的技术水平。 ### 回答2: HTML5是一种用于开发网页内容和应用的标准技术,而电脑游戏是一种受欢迎的娱乐方式。在博客园上,我们可以找到一些关于HTML5电脑游戏代码的分享和讨论。 HTML5提供了一些功能强大的API和工具,使得开发者可以用它来创建各种类型的电脑游戏。其中一种常见的方式是使用Canvas元素来绘制游戏场景和图形。开发者可以通过JavaScript来操作这些图形,并实现游戏中的各种交互和逻辑。 在博客园上,我们可以找到一些编写HTML5电脑游戏的示例代码,以及一些关于如何使用不同游戏引擎和框架的教程。有些博客主可能会分享一些自己开发的小型游戏,同时还提供了源代码和详细的讲解,以帮助其他人学习和理解游戏开发的过程。 通过在博客园上分享HTML5电脑游戏代码,我们可以促进知识和经验的交流,让更多的人受益于这些优秀的项目和资源。同时,其他开发者可以在评论区或者通过私信的方式提出问题和交流意见,促进更进一步的学习和改进。 综上所述,博客园是一个很好的平台,可以找到一些关于HTML5电脑游戏代码的分享和讨论。通过在这个平台上的交流,我们可以相互学习和提高,推动HTML5游戏开发的进步。 ### 回答3: HTML5电脑游戏代码是指使用HTML5技术开发的电脑游戏的源代码。HTML5是一种用于创建和呈现网页内容的标准技术,它包括HTML、CSS和JavaScript等语言,可以在各种设备上运行,包括电脑。 博客园是一个知名的社区型博客平台,提供了用户自主发表博客文章的功能。在博客园上,用户可以分享自己的技术心得、游戏开发经验等内容。 如果要在博客园上分享HTML5电脑游戏代码,可以按照以下步骤进行: 1. 进入博客园官网,并登录自己的账号。 2. 点击页面上的“写新博客”或类似的按钮,开始撰写新的博客文章。 3. 在文章编辑页中,选择合适的标题和分类,以及补充必要的标签以方便他人搜索。 4. 在文章的正文部分,将HTML5电脑游戏的代码粘贴进去。 5. 根据需要,在代码附近提供详细的说明和解释,帮助读者理解代码的作用和使用方法。 6. 检查一遍文章内容,确保格式和代码的展示正确无误。 7. 点击保存或发布按钮,将博客文章保存并发布到自己的博客空间。 通过在博客园上分享HTML5游戏代码,可以让其他游戏开发者或对此感兴趣的读者学习和参考代码,互相交流和分享经验。同时,博客园也提供了评论功能,读者可以留下问题或反馈,进一步促进交流和讨论。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值