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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
JS脚本实现动态给标签控件添加事件的方法
Jun 02 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
微信小程序中网络请求缓存的解决方法
Dec 29 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
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php跨站攻击实例分析
2014/10/28 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
Python学习笔记_数据排序方法
2014/05/22 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python Series从0开始索引的方法
2018/11/06 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
python中类与对象之间的关系详解
2020/12/16 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
政风行风自查自纠报告
2014/10/21 职场文书
幼儿学前班评语
2014/12/29 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
导游词之青城山景区
2019/09/27 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android