SyntaxHighlighter 长代码无法换行解决办法

新逸Cary 86 0
广告

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

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

1、css修改:

在文件夹:\ueditor\third-party\SyntaxHighlighter

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

.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();});

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

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

发表评论 取消回复
表情 图片 链接 代码

分享