首页 > 网页设计

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

相关合集

  • 购物返利的软件有哪些
购物返利的软件有哪些

简介:现在很多的用户在网上购物平台进行买东西的时候,都是会想要一省再省的购物方式,但是能够买到便宜的商品并不能够说明更省钱,只有在一些能够让你在买东西的时候还可以返利给你的,那才叫真正的让你花最少的钱买到最值得的东西,这里有很多的相关的购物赚钱的软件值得你的下载,都是很真实靠谱的。