z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(基于jquery)
用SyntaxHighlighter 語(yǔ)法高亮插件的朋友可能都遇到過(guò)代碼顯示不換行的問(wèn)題,這個(gè)問(wèn)題在網(wǎng)上也找不到什么解決辦法,一直困擾了我很久,今天算是把它解決了,辦法其實(shí)簡(jiǎn)單,下面說(shuō)下...
解決方法:
打開(kāi)shCoreDefault.css文件,找到對(duì).syntaxhighlighter textarea的定義,在最后加上一句:word-break:break-all !important;就ok了,意思是讓代碼強(qiáng)制換行顯示。
由于每個(gè)人調(diào)用的css不同,大家可以根據(jù)自己的需要修改css
測(cè)試發(fā)現(xiàn)對(duì)于3.08版本無(wú)效,大家可以參考下面的方法
由于我的博客主要是代碼分享,很多貼的代碼,都很長(zhǎng)。很多時(shí)候我都是手動(dòng)給他換行。
但是今天實(shí)在是受不了。從網(wǎng)上找個(gè)辦法解決一下。
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();});
上面的代碼就是屬于長(zhǎng)代碼。大家看看是不是都換行了??
現(xiàn)在,行號(hào)的高度就能和代碼的高度保持一致了。
- SyntaxHighlighter 去掉右側(cè)滾動(dòng)條的方法
- 防止SyntaxHighlighter.js的代碼高亮?xí)r閃一下的解決方法
- SyntaxHighlighter自動(dòng)識(shí)別并加載腳本語(yǔ)言
- SyntaxHighlighter 3.0.83使用筆記
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(jquery)
- 解決SyntaxHighlighter 代碼高亮不換行問(wèn)題的解決方法
- FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 代碼著色之SyntaxHighlighter項(xiàng)目(最流行的代碼高亮)
- syntaxhighlighter 去掉右上角問(wèn)號(hào)圖標(biāo)的三種方法
- 為SyntaxHighlighter添加新語(yǔ)言的方法
- SyntaxHighlighter配合CKEditor插件輕松打造代碼語(yǔ)法著色
- SyntaxHighlighter語(yǔ)法高亮插件使用說(shuō)明
- ckeditor syntaxhighlighter代碼高亮插件,完美修復(fù)
- coolcode轉(zhuǎn)SyntaxHighlighter與Mysql正則表達(dá)式實(shí)現(xiàn)分析
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
- SyntaxHighlighter 語(yǔ)法高亮插件的使用教程
- 使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
- FCKEditor SyntaxHighlighter整合實(shí)現(xiàn)代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關(guān)于實(shí)現(xiàn)代碼語(yǔ)法標(biāo)亮 dp.SyntaxHighlighter
- SyntaxHighlighter?Autoloader(自動(dòng)加載)最優(yōu)方式
相關(guān)文章
基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
寫(xiě)了一小段代碼讓非HTML5瀏覽器支持placeholder屬性。零配置零css支持IE62011-05-05
jQuery使用removeClass方法刪除元素指定Class的方法
這篇文章主要介紹了jQuery使用removeClass方法刪除元素指定Class的方法,可實(shí)現(xiàn)針對(duì)指定元素樣式的批量刪除功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn)
這篇文章介紹了JQuery頁(yè)面圖片切換和新聞列表滾動(dòng)效果的具體實(shí)現(xiàn),有需要的朋友可以參考一下2013-09-09
jquery刪除指定的html標(biāo)簽并保留標(biāo)簽內(nèi)文本內(nèi)容的方法
有時(shí)我們希望刪除這段html代碼里面的一對(duì)<p>標(biāo)簽,但是要保持里面的內(nèi)容不被刪除,本文提供的這個(gè)jquery方法就可以簡(jiǎn)單實(shí)現(xiàn)。2014-04-04
jQuery不兼容input的change事件問(wèn)題解決過(guò)程
本文記錄了在項(xiàng)目中發(fā)現(xiàn)在IE9中不會(huì)立即觸發(fā)change事件,存在兼容問(wèn)題的解決過(guò)程,非常的詳盡,解決過(guò)程中也有新問(wèn)題出現(xiàn),最終都解決完畢,完美實(shí)現(xiàn)了兼容各大主流瀏覽器2014-12-12
jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié)
jQuery CheckBox全選、全不選實(shí)現(xiàn)代碼小結(jié),對(duì)于操作jquery的朋友可以參考下。2010-04-04
用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì)
本節(jié)主要介紹了用Jquery選擇器計(jì)算table中的某一列某一行的合計(jì),需要的朋友可以參考下2014-08-08

