龙空技术网

syntaxhighlighter 代码超长之后自动换行对齐

吕小奉先 113

前言:

现在同学们对“js表格自动换行”大致比较注重,姐妹们都需要知道一些“js表格自动换行”的相关内容。那么小编也在网络上汇集了一些对于“js表格自动换行””的相关内容,希望咱们能喜欢,看官们一起来了解一下吧!

一个完美的站长网站里面没有代码高亮的插件怎么能行!小编在用SyntaxHighlighter插件的时候就遇到了一个非常脑热的问题,所以分享一下解决方法!

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。

问题描述

SyntaxHighlighter是根据代码中的换行符分配行号的。但是如果一行代码或注释太长的话在页面中显示时需要分成多行显示,这时行号就对不上了!就像下图的情况

左侧的行号和右侧的内容是不对齐的

解决方法

其实通过修改引用的CSS样式使其强制不换行,但这种方法的话下方会出现横向滚动条,太不美观了,权衡利弊,果断抛弃。

我的原理是把行用each遍历一下,计算出右侧的行高,然后把得到的值赋给左侧的行号列。

代码如下:

<script>

$(window).load(function(){

$('.code .line').each(function(index) {

var yqhg = $(this).height();

$('.gutter .line:eq('+index+')').attr('style','height:'+yqhg+'px !important')

});

});

</script>

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

如果本文对你有用的话请不要忘记分享关注哦!谢谢观看!

标签: #js表格自动换行