z-blog SyntaxHighlighter 長代碼無法換行解決辦法(基于jquery)
用SyntaxHighlighter 語法高亮插件的朋友可能都遇到過代碼顯示不換行的問題,這個問題在網(wǎng)上也找不到什么解決辦法,一直困擾了我很久,今天算是把它解決了,辦法其實(shí)簡單,下面說下...
解決方法:
打開shCoreDefault.css文件,找到對.syntaxhighlighter textarea的定義,在最后加上一句:word-break:break-all !important;就ok了,意思是讓代碼強(qiáng)制換行顯示。
由于每個人調(diào)用的css不同,大家可以根據(jù)自己的需要修改css
測試發(fā)現(xiàn)對于3.08版本無效,大家可以參考下面的方法
由于我的博客主要是代碼分享,很多貼的代碼,都很長。很多時候我都是手動給他換行。
但是今天實(shí)在是受不了。從網(wǎng)上找個辦法解決一下。
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();});
上面的代碼就是屬于長代碼。大家看看是不是都換行了??
現(xiàn)在,行號的高度就能和代碼的高度保持一致了。
- SyntaxHighlighter 去掉右側(cè)滾動條的方法
- 防止SyntaxHighlighter.js的代碼高亮?xí)r閃一下的解決方法
- SyntaxHighlighter自動識別并加載腳本語言
- SyntaxHighlighter 3.0.83使用筆記
- ckeditor syntaxhighlighter代碼高亮插件配置分享
- CKEditor中加入syntaxhighlighter代碼高亮插件
- z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
- 解決SyntaxHighlighter 代碼高亮不換行問題的解決方法
- FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 代碼著色之SyntaxHighlighter項(xiàng)目(最流行的代碼高亮)
- syntaxhighlighter 去掉右上角問號圖標(biāo)的三種方法
- 為SyntaxHighlighter添加新語言的方法
- SyntaxHighlighter配合CKEditor插件輕松打造代碼語法著色
- SyntaxHighlighter語法高亮插件使用說明
- ckeditor syntaxhighlighter代碼高亮插件,完美修復(fù)
- coolcode轉(zhuǎn)SyntaxHighlighter與Mysql正則表達(dá)式實(shí)現(xiàn)分析
- FCKeditor 和 SyntaxHighlighter 代碼高亮插件的整合
- SyntaxHighlighter 語法高亮插件的使用教程
- 使用SyntaxHighlighter實(shí)現(xiàn)HTML高亮顯示代碼的方法
- FCKEditor SyntaxHighlighter整合實(shí)現(xiàn)代碼高亮顯示
- SyntaxHighlighter代碼加色使用方法
- syntaxhighlighter 使用方法
- 關(guān)于實(shí)現(xiàn)代碼語法標(biāo)亮 dp.SyntaxHighlighter
- SyntaxHighlighter?Autoloader(自動加載)最優(yōu)方式
相關(guān)文章
jquery表單驗(yàn)證插件formValidator使用方法
這篇文章主要為大家詳細(xì)介紹了Jquery表單驗(yàn)證插件formValidator的相關(guān)使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
在實(shí)際應(yīng)用中,我們經(jīng)常會遇到這樣的場景,當(dāng)頁面加載完成后去做一些事情:綁定事件、DOM操作某些結(jié)點(diǎn)等。2011-02-02Jquery validation remote 驗(yàn)證的緩存問題解決方法
這篇文章主要介紹了Jquery validation remote 驗(yàn)證的緩存問題的解決方法 ,需要的朋友可以參考下2014-03-03詳解頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題
這篇文章主要介紹了詳解頁面滾動值scrollTop在FireFox與Chrome瀏覽器間的兼容問題 的相關(guān)資料,需要的朋友可以參考下2015-12-12jquery使用ajax實(shí)現(xiàn)微信自動回復(fù)插件
這篇文章主要介紹了jquery使用ajax實(shí)現(xiàn)微信自動回復(fù)插件,需要的朋友可以參考下2014-04-04