首页 > 博客园HTML源码运行特制js（原创自Zjmainstay）

博客园HTML源码运行特制js（原创自Zjmainstay）

canrun

测试运行HTML 
<html>
<head><title>测试博客园HTML源码运行程序title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><script type="text/javascript">alert('哈哈，我运行咯！！！');script>
head>
<body>
body>
html>

 

参考肥杜的教你如何在博客园放“可运行”代码

自己定制了一个专属博客园的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，可以触发运行htmlvar 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){if(postCons.eq(i).children('p:first').html()&&postCons.eq(i).children('p:first').html().toLowerCase().indexOf('canrun') != -1){postCons.eq(i).children('p:first').remove();}}
});
/*** 博客园格式化HTML执行函数* @params hid 格式化代码的个数index，第一个为0，第二个为1...*/
function doRunCnblogsHtml(hid){if(parseInt(hid) != hid) hid = 0;        //数值型检测$(".cnblogs_code").eq(hid).click();        //点击“+”以查看解析前的HTML源码$(".cnblogs_code").eq(hid).find(".cnblogs_code_copy").find("a").eq(0).click();        //点击复制按钮以得到解析后的HTML源码openWin($(".cnblogs_code").eq(hid).find('textarea').eq(0).val());        //将解析后的HTML源码在新窗口运行
}
/*** 新窗口执行HTML函数* @params     content        新窗口内容*/
function openWin(content){var newwin = window.open('', "_blank", '');        //为了简便，这里不设参数newwin.document.open('text/html', 'replace');newwin.opener = null;newwin.document.write(content);        //将内容写入新窗口
    newwin.document.close();
}
ZjmainstayRunHTML.js

//修复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代码中加入：

即可。

转载于:https://www.cnblogs.com/Zjmainstay/archive/2012/07/15/cnblogs_runHTML.html

更多相关：

  • 设置VSCode运行任务命令快捷键Alt+R，通常用于npm start(对频繁使用该命令可节省50%的输入命令行打字时间)

    首次运行Alt+R    然后继续Enter直到运行npm start为止...

  • windows7/10开启客户端telnet命令解决“‘telnet‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。”

    运行命令control打开控制面板 运行telnet命令就可以了...

  • 命令行创建React项目

        cnpm install -g create-react-app 找一个创建项目的目录，用cmd打开资源管理器对应目录运行 create-react-app demo 注意：安装过程中最好焦点不要移出cmd窗口，有时候会莫名其妙的中断安装 最后运行即可 cd democnpm start 运行成功后...

  • Windows下配置Maven环境变量

      win+R 运行sysdm.cpl 运行cmd mvn -v 如果不是这样就运行path 看下安装路径是否正确重新配置sysdm.cpl...

  • 在Ubuntu 16.04.6 LTS上升级Go到最新版1.12.5实录

    上一次我在Ubuntu 16.04.3 LTS上从源码安装了Go，当时最新的版本是1.10，参见我之前的博文 https://blog.csdn.net/tao_627/article/details/79375950 这里，我想将Go更新到现在的最新版本，下面是我的折腾过程，很简单，只需要替换Go语言的源码文件就可以了。 从G...

  • Mastering Algorithms with C中文版附带源码说明

    Mastering Algorithm with C是一本非常经典和独具个性的算法书,主要是从程序员的角度,对算法领域的基本内容,通过C语言进行源码实现,其附带的源码非常详细,对初接触这个领域的程序员很有参考价值.我特地将该书源码的使用方法做了笔记,放在这样,以便日后参考. 下面是该书的封面: 1.首先从OReilly...

  • 使用rpmbuild对ceph的源码包进行重新打包

    进入ceph源码包下载ceph相关的rpm包和tar包 我们下载的是ceph-12.1.1-0.el7.src.rpmceph L版本的rpm包 执行命令rpmbuild --rebuild ceph-12.1.1-0.el7.src.rpm 等待它执行到configuring done之后就强行终止 -- Found cytho...

  • 在Eclipse上通过插件获取github上的spring源码

    spring源码开始的时候是通过SVN来管理代码的，后来是转移到github上管理源码的，可以通过在github上直接下载spring的源码。 下面讲解如何通过在eclipse上的插件git来获取spring源码的 主要步骤如下： 1、首先需要在Eclipse中安装git的插件，在Eclipse-->Help-->Eclipse Ma...

  • matlab plot3d_号称轻量级MATLAB的数学工具—Maple 2019.2

    THE START更新堪称轻量级MATLAB的一款软件最新版-Maplesoft Maple 2019.2 中文版。Maple是符号和数字计算环境，也是一种多范式编程语言，由Maplesoft开发，还涵盖了技术计算的其他方面，包括可视化，数据分析，矩阵计算和MATLAB连接。MapleSim工具箱添加了用于多域物理建模和代码生成的...

  • 炫酷的def

    同学们，你们在学习他人的代码，是否见过这样的代码 def main(): def user_info(gender): 当你还是个小萌新时，你一定会认为这是个很牛逼的语法。 当你有了一点基础时，你一定会想要了解这个语法，并且尝试去使用它。 那么今天，我们便来了解这个牛语法。 有了一点点的python基础，我们来看这段代...

  • 【汇总】细数VSCode中那些能够真正意义提升开发效率、鲜为人知的快捷键

        自从用了这些快捷键，鼓励师也不需要了，代码开发效率蹭蹭提升！！！ ctrl+shift+[折叠代码 （这个比ctrl+k ctrl+l、ctrl+k ctr+j不知道好用多少倍！） ctrl+shift+]展开代码 ctrl+shift+T打开手贱不小心关掉的窗口 【推荐】ctrl+shift+O打开当前文件...

  • 设置Fetch快捷键Ctrl+Alt+Shift+1

    在提交代码之前，建议最好先Fetch代码下来（如果有冲突，系统会提示），然后再操作Merge到本地分支，这样做是为了避免有其他人同时修改了当前分支，如果直接用Ctrl+T（pull代码）极有可能覆盖本地分支最新代码，安全起见先Fetch代码（Ctrl+Alt+Shift+1）——所谓：小心驶得万年船！...

  • vim复制代码包含注释时格式会乱掉的解决办法

    每次复制代码时，如果代码里有 // 这样的注释就容易让格式乱掉，通过下面的设置就可以避免这种情况。 粘贴代码时取消自动缩进 VIM在粘贴代码时会自动缩进，把代码搞得一团糟糕，甚至可能因为某行的一个注释造成后面的代码全部被注释掉，我知道有同学这个时候会用vi去打开文件再粘贴上去（鄙人以前就是这样），其实需要先设置一下 s...

©2024 11GX.COM