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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
php跨域调用json的例子
2013/11/13 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
PyTorch中的C++扩展实现
2020/04/02 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
文秘应聘自荐书范文
2014/02/18 职场文书
九年级英语教学反思
2016/02/15 职场文书