z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)


Posted in Javascript onNovember 16, 2014

由于我的博客主要是代码分享,很多贴的代码,都很长。很多时候我都是手动给他换行。

但是今天实在是受不了。从网上找个办法解决一下。

1、css修改:

z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

在文件夹:\zb_system\ADMIN\ueditor\third-party\SyntaxHighlighter

在文件shCoreDefault.pack.css添加css:

body .syntaxhighlighter .line{     white-space: pre-wrap !important;} .syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;word-break:break-all;

2、Jquery代码:

$(function () { 
  // Line wrap back 
  var shLineWrap = function () { 
    $('.syntaxhighlighter').each(function () { 
      // Fetch 
      var $sh = $(this), 
        $gutter = $sh.find('td.gutter'), 
        $code = $sh.find('td.code') 
        ; 
      // Cycle through lines 
      $gutter.children('.line').each(function (i) { 
        // Fetch 
        var $gutterLine = $(this), 
          $codeLine = $code.find('.line:nth-child(' + (i + 1) + ')') 
          ; 
        //alert($gutterLine); 
        // Fetch height 
        var height = $codeLine.height() || 0; 
        if (!height) { 
          height = 'auto'; 
        } 
        else { 
          height = height += 'px'; 
          //alert(height); 
        } 
        // Copy height over 
        $gutterLine.attr('<SPAN style="WIDTH: auto; HEIGHT: auto; float: none" id=0_nwp><A style="TEXT-DECORATION: none" id=0_nwl href="http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww%2Esuchso%2Ecom%2Fprojecteactual%2Fz%2Dblog%2Djquery%2DSyntaxHighlighter%2Dlongcode%2Ehtml&p=baidu&c=news&n=10&t=tpclicked3_hc&q=95053049_cpr&k=style&k0=%CE%C4%BC%FE%BC%D0&kdi0=32&k1=style&kdi1=1&k2=%B2%A9%BF%CD&kdi2=1&sid=77860fedb9413425&ch=0&tu=u1702844&jk=e7459084404b7b2f&cf=29&fv=15&stid=9&urlid=0&luki=2&seller_id=1&di=128" target=_blank mpid="0"><SPAN style="WIDTH: auto; FLOAT: none; HEIGHT: auto; COLOR: #0000ff; FONT-SIZE: 16px">style</SPAN></A></SPAN>', 'height: ' + height + ' !important'); // fix by Edi, for JQuery 1.7+ under Firefox 15.0 
        console.debug($gutterLine.height(), height, $gutterLine.text(), $codeLine); 
      }); 
    }); 
  }; 
  // Line wrap back when syntax highlighter has done it's stuff 
  var shLineWrapWhenReady = function () { 
    if ($('.syntaxhighlighter').length === 0) { 
      setTimeout(shLineWrapWhenReady, 10); 
    } 
    else { 
      shLineWrap(); 
    } 
  }; 
  // Fire 
  shLineWrapWhenReady();});

上面的代码就是属于长代码。大家看看是不是都换行了??

现在,行号的高度就能和代码的高度保持一致了。

Javascript 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
Angular 路由route实例代码
Jul 12 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 #Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
vue.js实现只弹一次弹框
2018/01/29 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python注释详解
2016/06/01 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python删除某个目录文件夹的方法
2020/05/26 Python
宝宝周岁宴答谢词
2014/01/26 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
机器人瓦力观后感
2015/06/12 职场文书
安全第一课观后感
2015/06/18 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
python画条形图的具体代码
2022/04/20 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis