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+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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
图象函数中的中文显示
2006/10/09 PHP
图书管理程序(一)
2006/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
javascript时间函数大全
2014/06/30 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python中栈的原理及实现方法示例
2019/11/27 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
商务英语应届生自我鉴定
2013/12/08 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
网络研修随笔感言
2014/02/17 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
2015党建工作简报
2015/07/21 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
ipad隐藏软件app图标方法
2022/04/19 数码科技