z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)

用SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题，这个问题在网上也找不到什么解决办法，一直困扰了我很久，今天算是把它解决了，办法其实简单，下面说下...

解决方法：

打开shCoreDefault.css文件，找到对.syntaxhighlighter textarea的定义，在最后加上一句：word-break:break-all !important;就ok了，意思是让代码强制换行显示。

由于每个人调用的css不同，大家可以根据自己的需要修改css

测试发现对于3.08版本无效,大家可以参考下面的方法

由于我的博客主要是代码分享，很多贴的代码，都很长。很多时候我都是手动给他换行。

但是今天实在是受不了。从网上找个办法解决一下。

1、css修改：

在文件夹：\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();});

上面的代码就是属于长代码。大家看看是不是都换行了？？

现在，行号的高度就能和代码的高度保持一致了。

赞 (0)

相关推荐

  • textarea中的手动换行处理的jquery代码

    textarea中的手动换行处理的jquery代码

    网上众说纷纭,经过测试用 textarea的内容.replace(/\n/g, "<br/>") 解决问题,在IE6/7/8/9 Firefox/3.6.13 chrome10.0.648.82下测试通过,示例代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

  • jquery实现（textarea）placeholder自动换行

    思路:利用文本框的聚焦和失焦事件 1.HTML结构 <textarea id="text1"></textarea> 2.js方法 <script> var placeholder = '第一行文本提示\n第二行文本提示\n第三行文本提示'; $('#text1').val(placeholder); $('#text1').focus(function() { if ($(this).val() == placeholder) { $(this).

  • js/jquery去掉空格,回车,换行示例代码

    Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去掉空格 .replace(/\ +/g,"") //去掉空格方法$("#content").val($("#content").val().replace(/[ ]/g,""));    //去掉空格 .replace(/[ ]/

  • z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

    z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

    由于我的博客主要是代码分享,很多贴的代码,都很长.很多时候我都是手动给他换行. 但是今天实在是受不了.从网上找个办法解决一下. 1.css修改: 在文件夹:\zb_system\ADMIN\ueditor\third-party\SyntaxHighlighter 在文件shCoreDefault.pack.css添加css: 复制代码 代码如下: body .syntaxhighlighter .line{     white-space: pre-wrap !important;} .syn

  • jQuery替换textarea中换行的方法

    本文实例讲述了jQuery替换textarea中换行的方法.分享给大家供大家参考.具体分析如下: 昨天同事在学习jQuery的时候,希望使用替换掉textarea中的换行. html部分: <fieldset> <textarea id="ncontent"></textarea> </fieldset> <button id="submit">提 交</button> js部分: $(docu

  • z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)

    z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)

    用SyntaxHighlighter 语法高亮插件的朋友可能都遇到过代码显示不换行的问题,这个问题在网上也找不到什么解决办法,一直困扰了我很久,今天算是把它解决了,办法其实简单,下面说下... 解决方法: 打开shCoreDefault.css文件,找到对.syntaxhighlighter textarea的定义,在最后加上一句:word-break:break-all !important;就ok了,意思是让代码强制换行显示. 由于每个人调用的css不同,大家可以根据自己的需要修改css 测

  • PHP中去除换行解决办法小结（PHP_EOL）

    第一种写法: $content=str_replace("\n","",$content); echo $content; 第二种写法: str_replace("\r\n","",$str); 第三种写法: $content=preg_replace("/\s/","",$content); echo $content; 附: 首先说说\n,\r,\t \n 软回车: 在Windows

  • jQuery 3.0中存在问题及解决办法

    jQuery 3.0中存在问题及解决办法

    jQuery 前阶段推出了3.0版本,改动非常大,如果要使用 3.0 的话,建议先仔细了解一下新特性,否则会引起一些小问题,例如下面的代码. 大家对jQuery 3.0十大新特性不了解的朋友可以参考下本篇文章. <html> <head> <meta charset="utf-8"> <script src="jquery-3.0.min.js"></script> <script> $(fun

  • IIS7使用.NET Framework v4.0运行库报500错误的解决办法

    IIS7使用.NET Framework v4.0运行库报500错误的解决办法

    故障说明:1)Windows Server 2008 R2环境下安装的IIS7.52)安装.Net4.53)运行网站,报500错误:检查了webconfig等代码,没有问题 解决办法:重新注册.Net4.5,过程如下:一.开始,查找框中输入cmd字眼,然后出现cmd.exe应用程序二.cmd.exe上右键,选择用管理员身份来运行. 三.往命令行窗口中粘贴以下命令,回车,完成注册. 复制代码 代码如下: "%WINDIR%\Microsoft.NET\Framework\v4.0.30319\as

  • 基于jQuery实现Div窗口震动特效代码-代码简单

    基于jQuery实现Div窗口震动特效代码-代码简单

    这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=&q

  • C语言长字符串的换行方法详解

    C语言长字符串的换行方法详解

    目录 1.长字符串示例 2.书写长字符串的换行方法 方法一:利用双引号对长字符串进行换行 方法二:利用反斜杠对长字符串进行换行 3.总结 在编写C程序时,如果想要打印某个字符串,而字符串的内容比较多,这就涉及到对这个长字符串进行书写换行,这里的换行并不会对最终的显示结果进行换行,只是为了阅读代码能够更加的清晰,不至于字符串的内容过长影响代码的阅读体验. 1.长字符串示例 /** * @file test.c * @author Ailson Jack (jackailson@foxmail.co

  • FCKeditor + SyntaxHighlighter 让代码高亮着色插件

    FCKeditor + SyntaxHighlighter 让代码高亮着色插件

    FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,可以最小化修改您的程序实现效果,最终效果截图: 演示网页: 下载FCKeditor + SyntaxHighlighter插件包:fck_SyntaxHighlighter我们打包版 下面分步介绍如何在FCKeditor环境中使用SyntaxHighlighter. 后台FCKeditor编辑器的修改 1.将包解压后,把 insertcode 文件夹上传到 FCKeditor编辑器

  • python报错TypeError: Input z must be 2D, not 3D的解决方法

    python报错TypeError: Input z must be 2D, not 3D的解决方法

    目前,在使用python处理一个nc文件绘制一个风场图时,出现了以下报错 虽然图片画出来了,但是很丑而且没有理想的填充颜色! 但是不知道为啥,但是参考画图过程,分析这个其中的Z应该指的绘制等高线中的这个函数:matplotlib.pyplot contourf  中使用到的Z! 而这个函数的用法为 coutour([X, Y,] Z,[levels], **kwargs) 在这里提出,matplotlib.pyplot contourf 是用来绘制三维等高线图的,不同点是contour()是绘制

  • 编写xml没有代码提示的解决方法

    编写xml没有代码提示的解决方法

    有时候在编写 struts.xml 会没有代码提示,一般是因为没有联网导致的,或者之前配置过 dtd 文件 url,但是文件路径之后被修改了. 解决方案有: 让电脑联网 修改 dtd 的本地路径以及 url 第二种的步骤如下: Window-->>Preferences 搜索 : xml catalog -->>Add 勾选 workspace -->选择本地 dtd 文件的 Location --->>Key type 选择 URI 点击 OK 即可. 以上这篇

随机推荐