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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
js正则匹配多个全部数据问题
Dec 20 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
PHP 输出缓存详解
2009/06/20 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Django框架表单操作实例分析
2019/11/04 Python
PyTorch中的C++扩展实现
2020/04/02 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
初一生物教学反思
2014/01/18 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
毕业论文致谢信
2015/05/14 职场文书
让世界充满爱观后感
2015/06/10 职场文书
Python装饰器详细介绍
2022/03/25 Python
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
Python&Matlab实现樱花的绘制
2022/04/07 Python