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

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

打包下载

(0)

相关推荐

  • Vue中使用highlight.js实现代码高亮显示以及点击复制

    目录 效果如下 第一步 安装highlight.js 第二步 在main.js中引入 第三步 创建组件 效果如图:点击显示代码 第四步: 使用组件 第五步 实现点击复制代码clipboard.js. 本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,具体如下: 效果如下 第一步 安装highlight.js yarn add highlight.js 第二步 在main.js中引入 import hl from 'highlight.js' // 导入代码高亮文件

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

    没想到最近(2012年12月份)实现代码复制问题,要不所有内容都是一行,只有拥有工具的人士才能很快的看到代码,这样代码用起来就简单多了,可以直接复制了啊,不用每次是转化什么的.这篇文章技术是技术为主,看看他们用了什么方法,需要的朋友可以参考下.为方便备份,先打包一份代码,有需要的自己研究. 复制代码 代码如下: //#region Copy&Run Code $(function () { var hlCodes = $("#cnblogs_post_body div.cnblogs_c

  • react中代码块输出,代码高亮显示,带行号,能复制的问题

    目录 react 代码块输出,代码高亮显示,带行号,能复制 以modal组件为例 infoModal.less样式 react 代码块插件 代码块插件 react 代码块输出,代码高亮显示,带行号,能复制 以modal组件为例 import React, { useState, useEffect } from 'react'; import { Modal, Button, message } from 'antd'; import Highlight from 'react-highligh

  • Discuz5.5.0代码高亮显示+运行代码框合成插件 下载第1/4页

    主要功能: 1.几乎支持所有程序代码的高亮显示,包括以下语言:Actionscript.ADA.Apache Log.AppleScript.ASM.ASP.AutoIT.Backus-Naur form.Bash.BlitzBasic.C.C for Macs.C#.C++.CAD DCL.CadLisp.CFDG.CFDG.ColdFusion.CSS.Delphi.DIV.DOS.Eiffel.Fortran.Fortran.FreeBasic.GML.Groovy.HTML.Inno.I

  • xheditor所见即所得文本编辑器(代码高亮显示修改)

    所见即所得的文本编辑器目前在网上流传的已经有很多了,并且都比较优秀,就我个人而言,用过的有以下几个:     · 第一个接触的是ewebeditor,用在我的毕业设计里面,那时候是顺便选的,对这类东西也没什么了解,现在这个编辑器已经相当猛了:     · 后来工作中用了FCKEdier,原因很简单,这个文本编辑器已经有相应的asp.net服务器端控件,封装得很棒,不过毕竟是封装好了的控件,存在着一定的局限,而且目前这个文本编辑器已经全面改版,并且现在的名字叫CKEdier,现在所在公司的项目也是

  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

    下面就是我开发的过程. 首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) .下载地址 http://www.jb51.net/codes/17198.htmltinyMCE插入代码,需要调用 tinyMCE的 tinyMCE.execCommand('mceInsertContent',false,value); 方法.其中参数无需改变,value 就是你要插入的内容, 比如我写了一个函数, 复制代码 代码如下: function InsertHTML(v

  • 推荐Discuz!5的PHP代码高亮显示与实现可运行代码

    discuz!5.0论坛显示风格的php代码高亮显示插件, 把php代码进行语法着色,喜欢PHP的同志可以轻松的看代码啦. 同时添加了html代码运行功能. 此插件是在以前某位同志发布的Discuz!4的php代码高亮显示基础之上修改完成. 另外,本人的php学习进入了停滞状态, 希望有人能帮助我走出php的学习困境 My QQ:5642382  我的QQ群:2577162 功能:发贴时使用[php]php代码[/php]标记来高亮显示php代码,       使用[runcode]Html代码

  • FCKEditor SyntaxHighlighter整合实现代码高亮显示

    因此上网查了许多资料,没有说怎么做的,都是自己改好一个包上传.我研究了一个这些整合好的例子,粗略说一说,对以后开发其它FCKeditor插件也有好处. 为方便大家使用,我们特提供两个已经做成插件的版本.下载地址 第一步:在FCKeditor的路径中找到"editor\plugins\",在其中创建"highlighter"文件夹. 第二步:将"dp.SyntaxHighlighter\Scripts"文件夹复制到此文件夹中,所有的js文件和一个f

  • Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)

    discuz!5.0论坛显示风格的php代码高亮显示插件, 把php代码进行语法着色,喜欢PHP的同志可以轻松的看代码啦. 同时添加了html代码运行功能. 此插件是在以前某位同志发布的Discuz!4的php代码高亮显示基础之上修改完成. 另外,本人的php学习进入了停滞状态, 希望有人能帮助我走出php的学习困境 My QQ:5642382  我的QQ群:2577162 功能:发贴时使用[php]php代码[/php]标记来高亮显示php代码,       使用[runcode]Html代码

  • CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】

    本文实例讲述了CKEditor 4.4.1 添加代码高亮显示插件功能.分享给大家供大家参考,具体如下: 随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以前都是使用网友自己开发的代码高亮插件.下面就来介绍如何使用Code Snippet这个代码高亮插件.本文还介绍了CKEditor中如何安装Code Snippet插件. 新版本附加信息 CKEdi

随机推荐