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注入技巧
Jun 22 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
jQuery实现日历效果
Sep 11 jQuery
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
珊瑚虫IP库浅析
2007/02/15 PHP
PHP分页类集锦
2014/11/18 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python可以用来做什么
2020/11/23 Python
苹果台湾官网:Apple台湾
2019/01/05 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
秋季运动会开幕词
2015/01/28 职场文书
医院党建工作总结2015
2015/05/26 职场文书
清明节主题班会
2015/08/14 职场文书
python实现简单反弹球游戏
2021/04/12 Python