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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
jQuery右键菜单contextMenu使用实例
Sep 28 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python创建子类的方法分析
2019/11/28 Python
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
保险公司早会主持词
2014/03/22 职场文书
闭幕式主持词
2014/04/02 职场文书
化工专业自荐书
2014/06/16 职场文书
品质标语大全
2014/06/21 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
尊师重教演讲稿
2014/09/04 职场文书
监察建议书
2015/02/04 职场文书
2015年外联部工作总结
2015/04/03 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
element多个表单校验的实现
2021/05/27 Javascript
Python使用openpyxl模块处理Excel文件
2022/06/05 Python