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获取input的value问题说明
Aug 19 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
原生JS进行前后端同构
Apr 22 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 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,js双版本
2012/09/25 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
PHP的PDO操作简单示例
2016/03/30 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
js 操作符汇总
2014/11/08 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
js电话号码验证方法
2015/09/28 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python实现redis三种cas事务操作
2017/12/19 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
详解python数据结构和算法
2019/04/18 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
个人找工作求职简历的自我评价
2013/10/20 职场文书
三个儿子教学反思
2014/02/03 职场文书
医院信息公开实施方案
2014/05/09 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
代领报检证委托书范本
2014/10/11 职场文书
2014年创卫工作总结
2014/11/24 职场文书
2014年信息中心工作总结
2014/12/17 职场文书