z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(jquery)
由于我的博客主要是代碼分享,很多貼的代碼,都很長(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('<SPAN style="WIDTH: auto; HEIGHT: auto; float: none" id=0_nwp><A style="TEXT-DECORATION: none" id=0_nwl target=_blank mpid="0"><SPAN style="WIDTH: auto; FLOAT: none; HEIGHT: auto; COLOR: #0000ff; FONT-SIZE: 16px">style</SPAN></A></SPAN>', '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ǔ)言
- z-blog SyntaxHighlighter 長(zhǎng)代碼無(wú)法換行解決辦法(基于jquery)
- SyntaxHighlighter 3.0.83使用筆記
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- 解決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實(shí)現(xiàn)的簡(jiǎn)單排序功能示例【冒泡排序】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單排序功能,結(jié)合實(shí)例形式分析了冒泡排序的原理及具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01
基于jQuery實(shí)現(xiàn)數(shù)字滾動(dòng)效果
本文主要分享了基于jQuery實(shí)現(xiàn)數(shù)字滾動(dòng)效果的示例代碼,附源碼下載。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01
JQuery 初體驗(yàn)(建議學(xué)習(xí)jquery)
最近從朋友那兒聽(tīng)說(shuō),寫(xiě)JavaScript,JQuery是個(gè)不錯(cuò)的東東,市場(chǎng)份額達(dá)到70%之巨。所以去下載了一份體驗(yàn)了一下。2009-04-04
jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
這篇文章主要介紹了jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法,結(jié)合實(shí)例形式詳細(xì)分析了filter的功能及4種具體用法,需要的朋友可以參考下2016-04-04
jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果
這篇文章主要為大家詳細(xì)介紹了jquery鼠標(biāo)懸停導(dǎo)航下劃線滑出效果,菜單鼠標(biāo)懸停出現(xiàn)下劃線,向兩邊擴(kuò)展的效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09
解決自定義$(id)的方法與jquery選擇器$沖突的問(wèn)題
最近網(wǎng)站改版,原來(lái)的js都是原生js,因?yàn)楫?dāng)前比較jquery而且他的組件也比較多,使用方便,所以我們也采用了jquery但跟原來(lái)的$(id)沖突,經(jīng)過(guò)網(wǎng)絡(luò)很多人的推薦我們選擇了這個(gè)方法2014-06-06
jQuery 防止相同的事件快速重復(fù)觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復(fù)觸發(fā)方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
基于jQuery實(shí)現(xiàn)無(wú)縫輪播與左右點(diǎn)擊效果
在網(wǎng)頁(yè)中我們經(jīng)常會(huì)用到無(wú)縫輪播左右循環(huán)效果,今天腳本之家小編給大家?guī)?lái)了基于jQuery實(shí)現(xiàn)無(wú)縫輪播與左右點(diǎn)擊效果 ,感興趣的朋友參考下吧2018-05-05

