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格式化时间小结
Nov 03 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php中json_encode中文编码问题分析
2011/09/13 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
js常见遍历操作小结
2019/06/06 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
计算机大学生的自我评价
2013/10/15 职场文书
大学军训自我鉴定
2013/12/15 职场文书
安全事故检讨书
2014/01/18 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
党校毕业个人总结
2015/02/28 职场文书