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 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
JavaScript函数基础详解
Feb 03 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JS实现滑动插件
2020/01/15 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python实现统计代码行的方法分析
2017/07/12 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
python对execl 处理操作代码
2020/06/22 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
给老婆道歉的话
2015/01/20 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Kubernetes控制节点的部署
2022/04/01 Servers
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android