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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
解决vue处理axios post请求传参的问题
Mar 05 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 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缓存技术的使用说明
2011/08/06 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript中的闭包
2016/02/24 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python批量发送post请求的实现代码
2018/05/05 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
党员大会主持词
2014/04/02 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python