cnblogs 代码高亮显示后的代码复制问题解决实现代码_javascript技巧

没想到最近(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

打包下载

时间: 2024-11-08 17:26:51

cnblogs 代码高亮显示后的代码复制问题解决实现代码_javascript技巧的相关文章

JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版_javascript技巧

前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进: 首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式! 其次,虽然快捷功能有了,并且很好用,但是满屏幕的"好贴!我顶你!"也确实有些审美疲劳了,并且没什

JS代码放在head和body中的区别分析_javascript技巧

那么有什么不同呢?先看一个例子: 一个二级级联动态下拉列表框,一级分类(即大类别)id="vSort0". 复制代码 代码如下: <head> function changelocation(id) {----} </head> <body><select class="input1" id="vSort0" name="vSort0" onChange="changeloc

Javascript 代码也可以变得优美的实现方法_javascript技巧

一.简化代码 采用更为简短的写法,不仅可以减少输入的字符数,还可以减少文件大小.大部分采用简单写法的代码,执行效率都有轻微提高. 1.1 简化常用对象定义:使用 var obj = {}; 代替 var obj = new Object(); 使用 var arr = []; 代替 var arr = new Array(); 1.2 精简if语句三元操作符可以有效精简只涉及赋值传值操作的if语句,比如 var score = 60, grade; if (score < 60) { grade

深入理解JavaScript系列(46):代码复用模式(推荐篇)详解_javascript技巧

介绍 本文介绍的四种代码复用模式都是最佳实践,推荐大家在编程的过程中使用. 模式1:原型继承 原型继承是让父对象作为子对象的原型,从而达到继承的目的: 复制代码 代码如下: function object(o) {     function F() {     }     F.prototype = o;     return new F(); } // 要继承的父对象 var parent = {     name: "Papa" }; // 新对象 var child = obje

javascript代码调试之console.log 用法图文详解_javascript技巧

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log 先的简单介绍一下chrome的控制台,打开chrome浏览器,按f12就可以轻松

设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)_javascript技巧

由于chrome,safari,opara 浏览器还未支持自动 "设为首页" & "加入收藏".  所以我们只能try, catch一下, 给个错误提示!  也算完美了. 另外ie中, 很多人也碰到过 它window.external.addFavorite.  时会报错的问题.  所以俺也只好抛出提示信息了. 加入收藏: 复制代码 代码如下: function addFavorite(){    if (document.all){        try{

js代码实现点击按钮出现60秒倒计时_javascript技巧

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

JS完成代码前最好对其做5件事_javascript技巧

写在前面 我们不得面对这样一个事实:许多程序员不会规划他们的JS代码.我们经常快速写完代码.运行.提交.但当我们继续开发遇到变量和函数时不得不再次回头查看它们代表的含义,麻烦就从这里开始了.同样当我们在其他程序员手中获取脚本也会遇到类似的错误.因此,当我们说"this is done, I can go on"时最好对脚本做下列5件事情. 问题描述 现在我们想给每一个带有class属性为collapsible的DIV内部添加超链接A,来显示和隐藏DIV. 下面是用模块函数编写的实现代码

指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)_javascript技巧

复制代码 代码如下: <div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div><script type="text/javascript" >//缩放图片到合适大小function ResizeImages(){