SyntaxHighlighter行号显示错误及代码太长无法换行解决办法

作者:IT技术 | 时间:2018-10-20

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。如果一行代码或注释太长的话在页面中显示时需要分成多行显示,这时行号就对不上了,如下图:

SyntaxHighlighter行号显示错误及代码太长无法换行解决办法

SyntaxHighlighter自动换行以及更正行号的方法解决方法:

引入下面的css,强制长代码换行,放在SyntaxHighlighter的代码后面替换里面的样式。代码如下:

.syntaxhighlighter{width:100%!important;}
.syntaxhighlighter .line {
    white-space: pre-wrap !important;
    word-break: break-all;
}
.syntaxhighlighter .gutter .line{width:22px !important;}
.syntaxhighlighter td.code .container::before, .syntaxhighlighter td.code .container::after {display: none;}
/* 如果是需要保留一行内的单词完整性则需要把 break-all 改为 break-word  */

这个时候,如果行号的高度和代码的高度不能保持一致了。引入下面的代码:

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

插入到页面底部(SyntaxHighlighter.all()方法后面也行),本方法是基于JQuery写的,大家用这种方法之前请务必引入JQuery文件!