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

最新推荐文章于 2024-03-16 09:54:52 发布

weixin_34006468

最新推荐文章于 2024-03-16 09:54:52 发布

阅读量454

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/wybo521/blog/2252636

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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文件！

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

转载于:https://my.oschina.net/wybo521/blog/2252636