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 元素相对定位代码
Oct 15 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
js自定义回调函数
Dec 13 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 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 和 MySQL 基础教程(二)
2006/10/09 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
跟我学Laravel之路由
2014/10/15 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
numpy.where() 用法详解
2019/05/27 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python日志syslog使用原理详解
2020/02/18 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
好人好事事迹材料
2014/02/12 职场文书
新党章心得体会
2014/09/04 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
政府四风问题整改措施
2014/10/04 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL