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 相关文章推荐
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
原生JS进行前后端同构
Apr 22 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 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
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
js中日期的加减法
2015/05/06 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
Python封装shell命令实例分析
2015/05/05 Python
python实现最速下降法
2020/03/24 Python
如何真正的了解python装饰器
2020/08/14 Python
如何用Django处理gzip数据流
2021/01/29 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
感恩节红领巾广播稿
2014/02/11 职场文书
机关出纳岗位职责
2014/04/03 职场文书
婚前协议书怎么写
2014/04/15 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书