冰峰雪晴

如何使SyntaxHighlighter长代码自动换行[js/css]

时间：2018-07-07 ┊ 阅读：7,028 次 ┊ 标签: 设计 , JS , CSS

用SyntaxHighlighter高亮代码，最近发现下面有个滚动条不好看，
代码太长造成的，去掉滚动条让长代码能自动换行，就好了。
打开样式表shCoreDefault.css 22行，把white-space: pre !important;改为white-space: pre-wrap !important;

shCoreDefault.css 22行：

.syntaxhighlighter .line{/*white-space:pre !important;*/ white-space:pre-wrap !important;}

js代码如下：

<script>
$(window).load(function(){
    $('.code .line').each(function(index){
        var nheight = $(this).height();
        $('.gutter .line:eq('+index+')').attr('style','height:'+ nheight +'px !important')
    });
});
</script>

效果如下：

本文固定链接: https://www.amkevin.com/316.html｜冰峰雪晴｜转载请注明出处,谢谢