z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)


Posted in Javascript onNovember 18, 2015

用SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题,这个问题在网上也找不到什么解决办法,一直困扰了我很久,今天算是把它解决了,办法其实简单,下面说下...

解决方法:

打开shCoreDefault.css文件,找到对.syntaxhighlighter textarea的定义,在最后加上一句:word-break:break-all !important;就ok了,意思是让代码强制换行显示。

由于每个人调用的css不同,大家可以根据自己的需要修改css

测试发现对于3.08版本无效,大家可以参考下面的方法

由于我的博客主要是代码分享,很多贴的代码,都很长。很多时候我都是手动给他换行。

但是今天实在是受不了。从网上找个办法解决一下。

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('style', '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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 #Javascript
原生js模拟淘宝购物车项目实战
Nov 18 #Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 #Javascript
javascript实现添加附件功能的方法
Nov 18 #Javascript
Jquery Mobile 自定义按钮图标
Nov 18 #Javascript
javascript实现对表格元素进行排序操作
Nov 18 #Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 #Javascript
You might like
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php 判断数组是几维数组
2013/03/20 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
用tensorflow实现弹性网络回归算法
2018/01/09 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
英国现代绅士品牌:Hackett
2017/12/17 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
行政助理工作职责范本
2014/03/04 职场文书
商场主管竞聘书
2014/03/31 职场文书
产品质量保证书
2014/04/29 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
2015年保送生自荐信
2015/03/24 职场文书
看雷锋电影观后感
2015/06/10 职场文书
运动会3000米加油稿
2015/07/21 职场文书
靠谱准确的求职信
2019/04/02 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript