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之对系统的toFixed()方法的修正
May 08 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
node.js中axios使用心得总结
Nov 29 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
vue中实现动态生成二维码的方法
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
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python FFT合成波形的实例
2019/12/04 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
小学毕业感言150字
2014/02/05 职场文书
政风行风整改报告
2014/11/06 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
法学专业求职信范文
2015/03/19 职场文书
证婚人致辞精选
2015/07/28 职场文书
行为规范主题班会
2015/08/13 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL