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 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
vue实现图片上传功能
May 28 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
让你30分钟快速掌握vue3教程
Oct 26 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
javascript版2048小游戏
2015/03/18 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
对python函数签名的方法详解
2019/01/22 Python
keras.layer.input()用法说明
2020/06/16 Python
对python中list的五种查找方法说明
2020/07/13 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
品牌推广活动策划方案
2014/08/19 职场文书
保密工作承诺书
2014/08/29 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
行政介绍信范文
2015/05/04 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
小时代观后感
2015/06/10 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
cf战队宣传语
2015/07/13 职场文书
社区干部培训心得体会
2016/01/06 职场文书