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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
原生js编写2048小游戏
Mar 17 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
Vue退出登录时清空缓存的实现
Nov 12 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
python http基本验证方法
2018/12/26 Python
python实现对输入的密文加密
2019/03/20 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python分布式编程实现过程解析
2019/11/08 Python
python实现人机五子棋
2020/03/25 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
一道Delphi上机题
2012/06/04 面试题
服装厂厂长岗位职责
2013/12/27 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
投标单位介绍信
2014/01/09 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书