解决SyntaxHighlighter 长代码无法换行的问题

下面说下如何解决。

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

具体步骤

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

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

1、css修改:

在文件夹:zb_systemADMINueditorthird-partySyntaxHighlighter

在文件shCoreDefault.pack.css添加css:

 代码如下 复制代码

body .syntaxhighlighter .line{
   
white-space
: pre-wrap
!important
;}
pre
,
code
 
{
display
:
block
;
overflow
:
auto
;
background
:
#f4f4f4
;
padding
:
5px
 
10px
;
border
:
1px
 
solid
 
#eee
;
word-wrap:break-word;
/* Internet Explorer 5.5+ */
 
white-space
: pre-wrap;
/* Firefox */
}
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();});

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

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

部份来自:http://www.suchso.com/projecteactual/z-blog-jquery-SyntaxHighlighter-longcode.html

 

时间: 2024-09-15 14:31:50

解决SyntaxHighlighter 长代码无法换行的问题的相关文章

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

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

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

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

解决SyntaxHighlighter 代码高亮不换行问题的解决方法_网页编辑器

解决方法: 打开shCoreDefault.css文件,找到对.syntaxhighlighter textarea的定义,在最后加上一句:word-break:break-all !important;就ok了,意思是让代码强制换行显示. 由于每个人调用的css不同,大家可以根据自己的需要修改css

解决浏览器显示长数字不能自动换行或长字母不能换行的问题

原文:解决浏览器显示长数字不能自动换行或长字母不能换行的问题 首先看一下是什么问题: 例如: 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

FCKeditor + SyntaxHighlighter 让代码高亮着色插件_网页编辑器

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

js获取视频时长代码

 下面的这段js获取视频时长代码是网上找的,还没有测试,需要的朋友可以参考下 网上找的,因为最近要用,但还没试过    代码如下:     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       <html xmlns="http://www

求蚁群算法解决旅行商问题的代码

问题描述 求蚁群算法解决旅行商问题的代码 MATLAB解决旅行商问题的代码,在其他网站上的查到的都不能运行,有不少的错误.我刚刚接触MATLAB,不是太会用,求大神帮帮啊 解决方案 ACO蚁群算法解决TSP旅行商问题蚁群算法求解旅行商问题 python

asp.net-ASP.net代码中换行语句

问题描述 ASP.net代码中换行语句 如何在ASP.NET中实现换行现实内容,要求到达一定边界后自动 换行

ubuntu-Ubuntu下用信号量模拟的十字路口,可以在qt中实现吗,求大神解决以下是代码

问题描述 Ubuntu下用信号量模拟的十字路口,可以在qt中实现吗,求大神解决以下是代码 sn.c南北方向 #include #include #include #include #include #include #include #include int sem_id; void init(){ key_t key;int ret; unsigned short sem_array[2]; union semun { int val; struct semid_ds *buf; unsign