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 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
利用js实现简易红绿灯
Oct 15 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堆排序(heapsort)练习
2013/11/13 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
jquery 指南/入门基础
2007/11/30 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
微信公众号token验证失败解决方案
2019/07/22 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
学校岗位设置方案
2014/01/16 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
装修设计师求职信
2014/02/26 职场文书
节约用水倡议书
2014/04/16 职场文书
求职信的正确写法
2014/07/10 职场文书
委托证明模板
2014/09/16 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
历史博物馆观后感
2015/06/05 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang