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取float型小数点后两位数的方法
Jan 18 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
JAVA程序员面试题
2012/10/03 面试题
求职信的最佳写作思路
2014/02/01 职场文书
园艺师求职信
2014/03/10 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
医院搬迁方案
2014/06/14 职场文书
作风整顿剖析材料
2014/09/30 职场文书
小学语文教学反思范文
2016/03/03 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书