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 css() 方法動(dòng)態(tài)修改CSS屬性
在jquery中我們要?jiǎng)討B(tài)的修改css屬性我們只要使用css()方法就可以實(shí)現(xiàn)了,下面我來(lái)給各位同學(xué)詳細(xì)介紹介紹。2016-09-09jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法
jQuery多個(gè)版本或和其他js庫(kù)沖突主要是常用的$符號(hào)的問(wèn)題,該怎么解決呢?下面小編給大家?guī)?lái)了jQuery多個(gè)版本和其他js庫(kù)沖突的解決方法,一起看下吧2016-08-08jQuery插件HighCharts繪制的2D堆柱狀圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制的2D堆柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制2D柱狀圖的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03jquery使用$(element).is()來(lái)判斷獲取的tagName
這篇文章主要介紹了jquery使用$(element).is()來(lái)判斷獲取的tagName以及將取到標(biāo)簽用作到別的地方,需要的朋友可以參考下2014-08-08基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解
本篇文章介紹了,基于jquery的has()方法以及與find()方法以及filter()方法的區(qū)別詳解需要的朋友參考下2013-04-04jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫(huà)效果的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04jquery+html5爛漫愛(ài)心表白動(dòng)畫(huà)代碼分享
這篇文章主要介紹了jquery+html5爛漫愛(ài)心表白動(dòng)畫(huà),七夕你表白了嗎,如果還沒(méi)有的話,抓緊來(lái)學(xué)習(xí)學(xué)習(xí)吧,祝小伙伴們表白成功。2015-08-08javascript異步處理與Jquery deferred對(duì)象用法總結(jié)
這篇文章主要介紹了javascript異步處理與Jquery deferred對(duì)象用法,結(jié)合實(shí)例形式總結(jié)分析了jQuery異步請(qǐng)求處理相關(guān)操作技巧,需要的朋友可以參考下2019-06-06