首页 > 网页设计

SyntaxHighlighter关于滚动条的问题

发布时间:2012-10-09 13:42:24 来源:星知苑 作者:星之宇

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

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

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

 

去掉右侧滚动条:

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

padding:0 !important;[break]

修改为

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,超过自动隐藏。这个方法更美观点,但是不方面查看代码。

相关合集

  • 购物实惠的软件有哪些?
购物实惠的软件有哪些?

简介:随着社会的不断的进步传统的买东西,都是可以直接在手机上进行购买非常的方便生活,不仅有吃的有喝的还有各种不同种类的生活用品,家电用品等等,本站分享一些比较多人使用的,在上面买东西是非常的实惠价格很便宜还是可以给你保证正品的购物软件推荐。