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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 Javascript
详解async/await 异步应用的常用场景
May 13 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
session 的生命周期是多长
2006/10/09 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
js 文件引入实现代码
2010/04/23 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python搜索包的路径的实现方法
2019/07/19 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python 生成器需注意的小问题
2020/09/29 Python
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
Linux操作面试题
2012/05/16 面试题
疾病捐款倡议书
2014/05/13 职场文书
工会换届选举方案
2014/05/21 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
律师授权委托书范本
2014/10/07 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书