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实现滑块滑动改变值的实现代码
Apr 12 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
详解JavaScript常量定义
Jan 03 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
js实现列表按字母排序
Aug 11 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python中对列表排序实例
2015/01/04 Python
浅谈Python 对象内存占用
2016/07/15 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
编写python代码实现简单抽奖器
2020/10/20 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
Java多态性的定义以及类型
2014/09/16 面试题
业务主管岗位职责
2013/11/20 职场文书
十八大报告观后感
2014/01/28 职场文书
审计专业自荐信范文
2014/04/21 职场文书
中学生英语演讲稿
2014/04/26 职场文书
上诉状格式
2015/05/23 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android