博客园里大家都分享了很多的有用知识，看到好的代码，总想拿到手上去试一下，然后慢慢体会！如果是展示一段完整能运行的代码，若能给读者提供一个【运行代码】的按钮，就方便多了！前两天开通了博客园的JS权限（发邮件到contact@cnblogs.com可以申请开通），今天先拿这个试了一下手，先来体验一把吧：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>为行博客园中的代码添加一个运行代码按钮</title></head><body><h1>Hello, world!</h1></body></html>
运行上面的代码
点右上方的按钮试试看吧！没错，在一个新窗口中正确的显示了Hello, world!下面来说一下实现的步骤：
【情况分析】
博客园里正常插入的代码是由一个这样的大致结构组成的，如下所示：
<div class="cnblogs_code"> <pre> //这里是你的代码 //不过这段代码是经过cnblogs编辑器重新组织的一段html代码 </pre></div>
只要能够获得这个cnblogs_code下pre里的内容，并将这一段内容输出到一个新的窗口中，目标基本就实现了。这个实现的方法很简单，直接用jQuery就可获得，代码如下：
var code = $('.cnblogs_code').text();//注意这里不要用html()，否则你得到的将是一段cnblogs编辑器重组后的html代码如此，基本的思路便出来了：
1）在每一段代码区后面自动添加一个按钮，这样就不用手动去添加代码按钮了。看到有些博客朋友是手动添加按钮和增加一个textarea来放入代码实现的，这并不科学。
2）为该按钮绑定动作，点击时运行对应的代码片断。
3）有些代码片断不想添加运行代码按钮怎么办？我们只要手动为每一个代码断片增加一个can_run的className（进入到编辑的html模式下添加给代码区域一个can_run即可），然后在JS中只获取can_run里的代码，而不是cnblogs_code下的代码。如下图所示：
【JS代码的实现】
因为博客园页面自动引入了jQuery，那么接下来的实现我全部用jQuery来操作，实现代码如下：
$(function() { /* 获得整个页面可被运行的代码片断*/
var code = $('.can_run'); /*为每个can_run的代码区域添加按钮并绑定事件*/
code.each(function() { var button = $('<button class="runcode">运行上面的代码</button>'), //按钮
p = $('<p style="text-align:right;"></p>'), //按钮加入到段落中
$this = $(this); //保存当前代码区域的引用
/*组织结构，并在can_run之后添加这个结构*/
p.append(button);
$this.after(p); /*为当前代码片段对应的按钮绑定点击事件*/
button.on('click', function() { var win = window.open('', '_blank', ''); //开启新窗口
win.document.write( $this.text() ); //向新窗口输出内容 });
});
});
【这个JS代码放哪？】
1、直接将这段JS保存到本地，然后上传到你的博客园后台。【操作路径：管理 >> 文件 >> 选择文件并上传】
2、在博客设置里加入对这个JS文件的引用【操作路径：管理 >> 设置 >> 页首HTML代码】
<script src="你上传的js文件位置"></script>
【接下来做什么？】
接下来，你只要像往常一样将代码插入到文章中即可，如果有需要提供运行的代码片断，直接进入HTML模式，给该片断加一个can_run的className值即可。这个实现并不是复杂的逻辑，但确实能给我们带来一定的方便性。
转载请注明来自北磬书生的博客
http://www.cnblogs.com/langzs/p/6719618.html
延伸阅读
- 一个人的坚持就是胜利 2023-04-18 10:02:06.86
- 一步一个脚印 2023-04-18 09:24:45.927
- 第一次在团队中担当组织者 2023-04-15 14:18:40.773
- 多敲代码，不断试错 2022-09-08 15:46:35.223
- 这是一个我很喜欢的地方——万码学堂 2022-07-12 15:53:35.84
- 命名过程中的趣事 2022-07-12 14:55:07.337
- 在有限中追求无限的可能 2022-06-26 09:37:29.383
- 加油吧！代码人 2021-05-27 16:46:37.593
- 代码魅力之所在 2021-05-19 10:44:21.693
- 每行代码都是进步 2021-05-19 10:29:14.107
一个人的坚持就是胜利