canrun

 

参考肥杜的

自己定制了一个专属博客园的HTML源码运行js文件。

$(document).ready(function(){    //如果带有canrun标签    if($("#cnblogs_post_body p:first").html()&&$("#cnblogs_post_body p:first").html().toLowerCase().indexOf('canrun') != -1){        //移除canrun标签        $("#cnblogs_post_body p:first").remove();        //在文章底部加入运行此段代码HTML，可以触发运行html        var runString = '';        if($(".cnblogs_code").length > 1) runString += 'Tips:0表示第一段代码，1表示第二段...';        $("#cnblogs_post_body").append(runString);                //为每一段源码加可运行按钮        $.each($(".cnblogs_code"),function(i){            $(this).before('');        });    }        //运行此段代码点击触发事件    $("#runHTML").click(function(){        var hid = $("#hid").val();        //获取输入的代码段号        doRunCnblogsHtml(hid);            //弹窗运行相应代码段    });        //首页，直接移除canrun标签    var postCons = $(".postCon");    for(var i=0;i

//修复3个以上html源出错问题。

$(".cnblogs_code_copy a").eq(hid).click();

改为：$(".cnblogs_code").find(".cnblogs_code_copy").find("a").eq(0).click();

//新增功能：为每一个格式化源码增加直接运行按钮οnclick="doRunCnblogsHtml(i);"，并标明代码段号。另，加入了注释说明。

本段js分析了博客园的HTML源码结构及源码获取方式而得，主要原理是：

博客园每段HTML代码都有cnblogs_code类，点击之后源码会处打开状态，再点击其下的“复制”按钮则会将源码放置

到一个textarea上，此时我们便可以调用textarea的内容，使用新窗口打开源码，此时HTML源码将在新窗口中运行。

另外，本快捷运行有个条件，那就是可运行源码的博文开头需加上canrun字段，然后换行。如下图（本文开头截图）：

js文件已经考虑了博客园首页及文章页的情况，博客园首页将执行去除canrun字段处理，不生成可运行按钮。

运用方法，在博客园设置-页首Html代码中加入：

<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/ZjmainstayRunHTML.js"></script>

即可。