SyntaxHighlighter关于滚动条的问题

SyntaxHighlighter这个是一个高亮插件。现在被用于很多网站的代码显示。

但是SyntaxHighlighter3.0.83,由于自适应宽和高,导致一直有滚动条的问题。

其实这个问题可以修改css文件可以去掉。修改主题文件shCoreDefault.css(默认模版)

 

去掉右侧滚动条:

大概在shCoreDefault.css文件39行位置:

padding:0 !important;

修改为

padding: 1px 0 !important;

 

网上可能是36行  margin: 0 !important;修改为  margin:1px 0 !important;这样修改双击选中后会有错位问题。

 

去掉下侧的滚动条:

其实我也没有找到两全其美的方法,为什么这么说呢。这里我提供2种方法,但是多有缺陷。

建议:还是输代码的时候注意长度的,只要不超过一定的长度,是不会出现滚动条的。

1.自动换行

.syntaxhighlighter .line {

  white-space: pre !important;

}

修改这个pre为normal的话,前面的行数就会错位。

2.自动隐藏

.syntaxhighlighter {

  width: 100% !important;

  margin: 1em 0 1em 0 !important;

  position: relative !important;

  overflow: auto !important;

  font-size: 1em !important;

}

修改overflow的auto为hidden,超过自动隐藏。这个方法更美观点,但是不方面查看代码。

目前有 1 条评论

avatar

阿修  2013-03-13 23:07 1楼

终于有空用从你这里下载的高亮插件测试了下此文所说的去除横向滚动条的方法。发现第一种方法无效(和没改过一个样)。第二种方法有效,但确实妨碍查看代码。
所以决定回头检查自己博客的代码,把过长的都尽量分行重新插入,趁着还不多,工作量不算大。 回复
昵称
邮箱
主页
提交
订阅