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子元素过滤选择器使用示例
Jun 24 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
layui实现三级联动效果
2019/07/26 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
使用Python更换外网IP的方法
2018/07/09 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
经济管理专业自荐信
2013/12/30 职场文书
活动总结范文
2014/08/30 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python