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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
javascript常用的方法整理
Aug 20 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
js实现按座位号抽奖
Apr 05 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 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
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PDO::query讲解
2019/01/29 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
使用python Django做网页
2013/11/04 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
python制作websocket服务器实例分享
2016/11/20 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
人事部经理岗位职责
2014/03/07 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
亮剑观后感
2015/06/05 职场文书
高三数学教学反思
2016/02/18 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL