cnblogs 代码高亮显示后的代码复制问题解决实现代码


Posted in Javascript onDecember 14, 2011

没想到最近(2012年12月份)实现代码复制问题,要不所有内容都是一行,只有拥有工具的人士才能很快的看到代码,这样代码用起来就简单多了,可以直接复制了啊,不用每次是转化什么的。
这篇文章技术是技术为主,看看他们用了什么方法,需要的朋友可以参考下。为方便备份,先打包一份代码,有需要的自己研究。

//#region Copy&Run Code $(function () { 
var hlCodes = $("#cnblogs_post_body div.cnblogs_code"); 
if (hlCodes.length) { 
loadEncoderJs(); 
$.each(hlCodes, function () { 
var htmlContent = $(this).html(); 
$(this).html(htmlContent.replace(/(<br\s*\/?>){3}/gi, '<br/><br/>')); 
if ($(this).find("div.cnblogs_code_hide").length == 0) { 
if (parseInt($(this).css("height"), 10) > 30) { 
showCopyCode($(this)); 
var regex = /<script\s+type=[\"\']text\/javascript[\"\']>/gi; 
if (regex.test($(this).text())) { 
showRunCode($(this)); 
} 
} 
} 
}); 
} 
}); 
function showCopyCode(element) { 
$(element).append('<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)">复制代码</a></span>'); 
} 
function loadEncoderJs() { 
var encoderJs = document.createElement('script'); 
encoderJs.type = 'text/javascript'; 
encoderJs.src = 'http://common.cnblogs.com/script/encoder.js'; 
var node = document.getElementsByTagName('script')[0]; 
node.parentNode.insertBefore(encoderJs, node); 
} 
function copyCnblogsCode(element) { 
var codeContainer = getCnblogsCodeContainer(element); 
var cbCode = getCnblogsCodeText(codeContainer); 
var textarea = document.createElement('textarea'); 
$(textarea).val(cbCode).select(); 
$(textarea).css("width", $(codeContainer).css("width")); 
$(textarea).css("height", $(codeContainer).css("height")); 
$(textarea).css("font-family", "Courier New"); 
$(textarea).css("font-size", "12px"); 
$(textarea).css("line-height", "1.5"); 
$(codeContainer).parent().html(textarea); 
$(textarea).select(); 
$("<div>按 Ctrl+C 复制代码</div>").insertAfter($(textarea)); 
} 
function getCnblogsCodeContainer(element) { 
var codeContainer = $(element).parent().parent().parent().find("pre"); 
if (codeContainer.length == 0) { 
codeContainer = $(element).parent().parent().parent().find("div").first(); 
} 
return codeContainer; 
} 
function getCnblogsCodeText(codeContainer) { 
var cbCode = '\n' + $(codeContainer).html() 
.replace(/ /g, ' ') 
.replace(/<br\s*\/?>/ig, '\n') 
.replace(/<[^>]*>/g, ''); 
cbCode = cbCode.replace(/\n(\s*\d+)/ig, '\n'); 
cbCode = cbCode.replace(/\n/g, '\r\n'); 
if (typeof Encoder != undefined) { 
cbCode = Encoder.htmlDecode(cbCode); 
} 
cbCode = $.trim(cbCode); 
return cbCode; 
} 
function showRunCode(element) { 
var codeCopyDiv = $(element).find("div.cnblogs_code_toolbar"); 
if (codeCopyDiv.length) { 
$(codeCopyDiv).append('<span class="cnblogs_code_runjs"><a href="javascript:void(0);" onclick="runJsCode(this)">运行代码</a></span>'); 
} 
} 
function runJsCode(element) { 
var codeContainer = getCnblogsCodeContainer(element); 
var cbCode = getCnblogsCodeText(codeContainer); 
var newwin = window.open('', "_blank", ''); 
newwin.document.open('text/html', 'replace'); 
newwin.opener = null; 
newwin.document.write(cbCode); 
newwin.document.close(); 
} 
//#endregion

打包下载
Javascript 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
做网页的一些技巧
Feb 01 Javascript
JS动画效果代码3
Apr 03 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
js 可拖动列表实现代码
Dec 13 #Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 #Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 #Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 #Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 #Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 #Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 #Javascript
You might like
PHP下10件你也许并不了解的事情
2008/09/11 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JavaScript实现禁止后退的方法
2006/12/27 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
js文字横向滚动特效
2015/11/11 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
房地产端午节活动方案
2014/08/24 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
matlab xlabel位置的设置方式
2021/05/21 Python
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server
Python requests用法和django后台处理详解
2022/03/19 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js