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下给元素添加事件的方法与代码
Aug 13 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
工作时间上网检讨书
2014/02/03 职场文书
工程质量承诺书
2014/03/27 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
求职信结尾怎么写
2014/05/26 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Fluentd搭建日志收集服务
2022/09/23 Servers