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与asp.net(c#)互相调用方法
Dec 13 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
淘宝网店营销策划书
2014/01/11 职场文书
五年级数学教学反思
2014/02/11 职场文书
元旦活动感言
2014/03/08 职场文书
地理教师岗位职责
2014/03/16 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android
tree shaking对打包体积优化及作用
2022/07/07 Java/Android