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中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
ES6 十大特性简介
Dec 09 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php使用正则验证中文
2016/04/06 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP 类与构造函数解析
2017/02/06 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
JS实现汉字与Unicode码相互转换的方法详解
2017/04/28 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
python函数的5种参数详解
2017/02/24 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
python在不同条件下的输入与输出
2020/02/13 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
中餐厅经理岗位职责
2014/04/11 职场文书
土建施工员岗位职责
2014/07/16 职场文书
庆六一开幕词
2015/01/29 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
亮剑观后感300字
2015/06/05 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
golang在GRPC中设置client的超时时间
2021/04/27 Golang
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技