SyntaxHighlighter 是一个高亮插件。现在被用于很多WordPress等网站的代码显示。但是SyntaxHighlighter3.0.83,由于自适应宽和高,导致一直有滚动条的问题,如下图:

SyntaxHighlighter-scrollbar

说明:上图右侧有滚动条,很不美观

 

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

 

本文去掉右侧滚动条的实现方法

经过FireFox分析,修改 /wp-content/plugins/auto-syntaxhighlighter/SyntaxHighlighter/build/styles/shCore-min.css 文件

.syntaxhighlighter{width:100%!important;margin:1em 0 1em 0!important;position:relative!important;/*overflow:auto!important;*/font-size:1em!important}

注释掉 /*overflow:auto!important;*/ ,隐藏滚动条后的效果如图:

SyntaxHighlighter-no-scrollbar

去掉右侧滚动条后的效果,请见我的博客: https://blog.mimvp.com/2014/04/nginx-configuration-file-details/